:disabled

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。

查看更多关于:disabled的详细内容...