[ HTML教學 ] Input CSS placeholder,focus 的使用方法

標籤: ,

 

首先必須要了解 Input 的基本用法以及它是什麼樣元素。

請看 此篇教學介紹 W3C Input Tag

Tag 是在講 input 有哪些標籤可以使用,但是只要先知道他的用法即可。Input 也可以有其他不同的 Type 像是 text , password , submit 這些都有不同的用法,那此篇就先不講解他們的差別為何,有興趣的再自己去搜尋看看。

 

對 Input 有基本概念後,可以看到下圖。

當你想要點擊到某個 input 後產生樣式的變化,如果是你,你會怎麼做呢?

用 JS 直接寫還是用 CSS 更改呢?我想方法有很多種,今天要介紹的方法是用 CSS 就可以達成我們的目的:點擊 Input 後改變樣式(如圖)

 

 

如何達成?

HTML語法如圖

CSS語法

可以把 placeholder 當成是 input 的偽元素。

要選取到它的寫法如下圖

★說明

input : placeholder

可以改變提示字顏色

input : focus

當 nput 被點擊後,可以改變 input 的樣式,例如多藍色框。

input : focus : : placeholder

當 input 被點擊後,改變 placeholder 的樣式。

紅色 Mark 的地方很重要,也很容易遺忘,要注意。

 

 

★比較

沒有以上樣式設定的樣子。

有以上設定的樣子。

兩者,感覺如何,就看任務的需求了!有改變顏色,會讓使用者知道自己現在在什麼位子是優化使用者體驗的一種方式喔!

 

 

 

以上就是今天的技術筆記,感謝閱讀。

 

 

 

 



相關文章

One Page Scroll 判斷目前所在區塊(4/19更新說明)...   什麼是 One Page Scroll 呢? 概念類似垂直的幻燈片,只是操控的方式是以滑動(觸控螢幕,ex:手機)/ 滾輪(電腦)來進行,一樣可以點這個點翻動到此頁,也可以用...
CSS3增加了哪些語法?如何使用?   上篇前言跟大家說明CSS和CSS3的差別是什麼?答案是他們是密不可分的。那麼要如何使用CSS3新增的語法呢?這邊就來跟大家介紹一下CSS3增加了哪些語法以及它的使用方式喔~ &nbs...
網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
lang 網頁的語系宣告   什麼是lang? lang 主要用來宣告網頁的語系,主要是給瀏覽器看的,所以如果要做好SEO(搜尋引擎最佳化,英语:search engine optimization)需要...