:optional

版本：CSS3

CSS伪类:optional表示任意没有required属性的<input>，<select>或<textarea>元素使用它。即非必填的元素。

语法:

E:optional{sRules}

• :optional选择器选择没有必需属性（required属性）的表单元素，在表单元素是可选项时设置指定样式。
• 表单元素中设置有required属性，是必填项。如果没有特别设置required属性即为optional属性。
• :optional选择器只适用于表单元素:<input>，<select>或<textarea>元素。
• 浏览器：IE10以下、Opera10以下不支持。

/* selects any optional <input> */
input:optional {
  border: 1px dashed black;
}

它允许表单容易的展示可选字段并且渲染其外观。

注：为必填字段设置外观，请使用:required伪类。

浏览器支持

IE10+以及新版浏览器都支持:optional
IE9 及更早IE版本不支持:optional选择器

例子

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