文章彙整

前端開發:表單元件常用的CSS選擇器

Astral WebBy Astral Web 2 weeks agoNo Comments
首頁  /  網站設計與開發  /  前端開發  /  前端開發:表單元件常用的CSS選擇器

這篇文章要為大家介紹表單元件常用的CSS選擇器

input:checked

被選中的核取方塊和單選按鈕的選項

<input type="radio" checked="checked" value="male" name="gender"> Male<br>
<input type="radio" value="female" name="gender"> Female<br>
<input type="checkbox" checked="checked" value="Bike"> I have a bike<br>
<input type="checkbox" value="Car"> I have a car

 

input:default

核取方塊和單選按鈕的預設值

<label><input type="radio" checked="checked" value="male" name="gender"> Male</label>
<label><input type="radio" value="female" name="gender"> Female</label>
<label><input type="checkbox" checked="checked" value="Bike"> I have a bike</label>
<label><input type="checkbox" value="Car"> I have a car</label>

 

input:disabled

含有disabled=”disabled” 或是 disabled 標籤的元件

input:enabled

既不含disabled=”disabled” 也不含 disabled 標籤的元件

姓: <input type="text" value="王"><br>
名: <input type="text" value="大凱"><br>
出生地: <input type="text" disabled="disabled" value="台北市">

 

input:focus

處於focus狀態的元件,一般是被滑鼠點中的元件。例如被選中的輸入框和被點擊的連結。

input:in-range

用於有設定範圍的數字輸入框、當輸中框有值並在範圍內、或者是輸入框內沒有值

<input type="number" min="5" max="10" value="7">

 

input:out-of-range

用於有設定範圍的數字輸入框、當輸中框有值並超出範圍時

<input type="number" min="5" max="10" value="17">

 

input:invalid

當輸入框內的值無效時, 通常使用在 type=”email”

<input type="email" value="support">

input:valid

當輸入框內的值有效時或沒有值時, 通常使用在 type=”email”

<input type="email" value="[email protected]">

 

input:optional

既不含required 也不含 required=”required”標籤的表單元件

input:required

含有required或是 required=”required”標籤的表單元件

<input type="text" required>

 

input::placeholder

輸入框內的提示文字

input:read-only

含有readonly標籤的表單元件

<input type="text" readonly>

 

input:read-write

不含有readonly標籤的表單元件

提供codepen的範例給您參考: https://codepen.io/ellen-shih/pen/oNXdOwx

 

喜歡本次分享的朋友們,別忘了追蹤歐斯瑞臉書粉絲團Instagram,以及訂閱我們的電子報唷!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Categories:
  前端開發網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。