: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>
给选中的输入元素设置背景色
用户名:密码: