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

 

 

★比較

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

有以上設定的樣子。

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

 

 

 

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

 

 

 

 

Leave a Comment