CSS:好玩的‘伪类’系列之——(:optional)
:optional
定义:指任意没有required属性的 <input>,<select> 或 <textarea> 元素,修改其样式。
触发条件:只针对没有required属性的 <input>,<select> 或 <textarea> 元素,修改样式
兼容:IE10以下、Opera10以下不支持
举个栗子
html代码:
<input type="text"/>
<br/>
<input type="password" required/>
<br/>
<input type="email"/>
<br/>
<select>
<option value="op1">option1</option>
<option value="op2">option2</option>
<option value="op3">option3</option>
<option value="op4">option4</option>
<option value="op5">option5</option>
</select>
<br/>
<select required>
<option value="op1">option1</option>
<option value="op2">option2</option>
<option value="op3">option3</option>
<option value="op4">option4</option>
<option value="op5">option5</option>
</select>
<br/>
<textarea required></textarea>
<br/>
<textarea></textarea>
css代码:
input,select,textarea{
margin-bottom: 30px;
}
input:optional,textarea:optional {
border: 5px solid black;
}
input:required,textarea:required {
border: 5px solid green;
}
select:optional {
color:blue;
}
select:required {
color:pink;
}
效果图: