:enabled - 可用状态的元素 - UI元素状态伪类选择器

乐乐2年前 (2023-11-21)阅读数 35#技术干货

文章标签元素

:enabled

版本：CSS3

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

语法:

E:enabled{sRules}

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

浏览器支持


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

例子

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

//HTML


      first field (enabled): 

      second field (disabled): 

      


//CSS


input:enabled {color: #22aa22;}
input:disabled {color: #d9d9d9;}

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

first field(enabled):
second field(disabled):
.demo label{margin-right:10px;}.demo1 input:enabled{color:#22aa22;}.demo1 input:disabled{color:#d9d9d9;}







input[type="text"]:enabled{
background-color:pink;
}





给选中的输入元素设置背景色
用户名:

密码:

.demo2 input[type="text"]:enabled{background-color:pink;}

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

用户名:
密码:

内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)