[ 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 很麻煩為什麼要這麼特立獨行,但是作為...
滾動到此時執行動畫 Animate On Scroll   今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回...
HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...
CSS和CSS3的差別?   怎麼說呢? CSS3和CSS本身不應該有區別,因為他們是同一個東西,CSS3是CSS的進化版,CSS3只是一個更新的版本還是有CSS為基底的,所以不可能說跳過CSS學CSS3...