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;
}

效果图: