CSS 伪类:enabled

CSS :enabled 伪类选择可用的元素并为其设置样式。

这些元素通常是表单元素,例如按钮(<button>)、选择菜单(<select>)、输入类型(<input>)和文本区域(<textarea>)。

启用的元素接受点击、文本输入或者焦点。

语法

:enabled {
  css declarations;
}

:enabled 选择器的示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        padding: 2px 5px;
      }
      input[type=text]:enabled {
        background: #eee;
      }
      input[type=text]:disabled {
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <h2>:enabled selector example</h2>
    <form action="#">
      <label for="name">First name:</label>
      <input type="text" value="John" id="name">
      <br>
      <label for="lastname">Last name:</label>
      <input type="text" value="Smith" id="lastname">
      <br>
      <label for="country">Country:</label>
      <input type="text" disabled="disabled" value="10 High Street" id="country">
    </form>
  </body>
</html>

带有 <option> 标签的 :enabled 选择器示例:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      option:enabled {
        background: #666;
      }
    </style>
  </head>
  <body>
    <h2>:enabled selector example</h2>
    <select>
      <option value="paris">Paris</option>
      <option value="london" disabled>London</option>
      <option value="moscow">Moscow</option>
      <option value="rome" disabled>Rome</option>
      <option value="berlin">Berlin</option>
    </select>
  </body>
</html>
日期:2020-06-02 22:14:29 来源:oir作者:oir