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

 

 

★比較

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

有以上設定的樣子。

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

 

 

 

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

 

 

 

 



相關文章

CSS Animation 如何用CSS來製作動畫的效果? (下集)... 今天要繼續跟大家介紹如何使用 Animation 的屬性,沒有看過上集的你 請點我看上集 ,那麼有看過上集的人我今天就要繼續介紹囉! ▲ 介紹內容 1. animation 可以製作什麼樣的效...
如何自訂義動畫 Animate On Scroll   上一篇有教大家基本的 AOS Animations 使用方式,這一篇要給有需要自訂義動畫的夥伴們所使用。   基本使用方式 連結支援: 滾動到此時執行動...
變數的命名方式與注意事項 #2 不知道大家在使用SCSS的時候有沒有想過,變數要怎麼命名比較好?好不容易有一這麼方便的變數功能當然要充分的利用。 這邊跟大家介紹一下以小女子目前寫SCSS的經驗,提幾點需要注意的地方與怎麼命名比較好...
CSS和CSS3的差別?   怎麼說呢? CSS3和CSS本身不應該有區別,因為他們是同一個東西,CSS3是CSS的進化版,CSS3只是一個更新的版本還是有CSS為基底的,所以不可能說跳過CSS學CSS3...