前端開發：表單元件常用的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，以及訂閱我們的電子報唷！