当前位置主页 > 资料库 > 前端教程 > :disabled | CSS属性参考

:disabled | CSS属性参考

2016-09-03

CSS :disabled伪类选择器用于匹配被禁用的元素。

如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。元素还有一个启用状态(enabled state),在启用状态下,元素可以被激活或获取焦点。

:disabled伪类选择器通常用于匹配按钮(<button>),select下拉框元素(<select>),input元素(<input>)和textarea元素(<textarea>)。当这些元素不能于用户进行交互时,就会被:disabled伪类选择器匹配。例如:

<input type="submit" disabled> 
<!-- 或者 -->
<input type="submit" disabled="disabled">

disabled属性是一个HTML5属性,它可以添加到以下一些元素中:<button><input><textarea><optgroup><option><fieldset>。当这些元素处于:disabled状态时,它们不能进行输入,点击和获取焦点。

示例代码
/* 为页面中所有被禁用的元素设置统一的样式 */
:disabled {
    background-color: #aaa;
    color: grey;
    border: 1px solid grey;
}
/* 为页面中被禁用的提交按钮设置样式 */
input[type="submit"]:disabled {
    background: #eee url(path/to/disabled.png) repeat-x;
    border: 1px solid grey;
}
/* 为被禁用的按钮的鼠标滑过状态设置鼠标样式 */
button:disabled:hover {
    cursor: not-allowed;
}
在线演示






浏览器支持

所有的现代浏览器都支持:disabled 伪类,包括:Chrome, Firefox, Safari, Opera9+, Internet Explorer 9+ 以及 Android 和 iOS。

相关阅读
Previous:
上一篇::checked | CSS属性参考
Next:
下一篇::enabled | CSS属性参考

我要评论

返回顶部