:disabled | CSS属性参考

1,164次阅读
没有评论

共计 934 个字符,预计需要花费 3 分钟才能阅读完成。

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。

相关阅读
正文完
 0