[ 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 的地方很重要,也很容易遺忘,要注意。

 

 

★比較

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

有以上設定的樣子。

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

 

 

 

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

 

 

 

 



相關文章

判斷手機系統 為 iOS 或是 Android 今天要和大家分享一個JS語法,這個語法可以判斷手機的系統,在我們寫網頁的時候時常會遇到 iOS 和 Android 手機頁面長的不同的困擾,這時候就會覺得 iOS 很麻煩為什麼要這麼特立獨行,但是作為...
網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
Font Awesome ( icon font ) 今天要和大家介紹 Font Awesome 這個工具的使用方式,他提供一些免費的 icon 和付費的 icon 可以使用,就目前為止我覺得他提供免費的素材還蠻夠用的。現在就要來教大家如何使用這項工具囉...
Scroll Animations 網頁滾動時播放動畫   今天要介紹幾個當網頁滾輪滾動時播放動畫的製作方式,一共有4個方法,目前我最常用的是Scroll Me。其他的大家可以嘗試試看看自己喜歡哪種方式。會了這些工具可以讓網頁在瀏覽的時後比...