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