• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • :enabled

    版本:CSS3

    CSS 伪类:enabled表示任何被启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用的。元素也有一个禁用的状态(disabled state),在被禁用时,元素不能被激活或获取焦点。

    语法:

    E:enabled{sRules}

    匹配用户界面上处于可用状态的元素E。

    浏览器支持

    IE9+以及新版浏览器都支持:enabled

    例子

    下面的代码,当文本输入框处于启用状态时,输入框<input>的文本是绿色的,处于禁用状态时,输入框的文本则是灰色的。这样可以把元素是否可用反馈给用户。

    //HTML
    
    <form action="url_of_form">
          <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br />
          <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br />
          <input type="submit" value="submit" />
    </form>
    
    //CSS
    
    
    input:enabled {color: #22aa22;}
    input:disabled {color: #d9d9d9;}
    

    需要注意的时提交按钮的文本颜色也是绿色的,因为按钮也是启用的。



    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    input[type="text"]:enabled{
    background-color:pink;
    }
    </style>
    </head>
    <body>
    
    
    <p>给选中的输入元素设置背景色</p>
    用户名:<input type="text"><br>
    密码:<input type="password"><br>
    </body>
    </html>

    给选中的输入元素设置背景色

    用户名:
    密码:

    上篇::checked

    下篇::disabled