• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :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;
    }
    






    上篇::read-write

    下篇::out-of-range