CSS :disabled 选择器

实例

为所有 type="text" 的被禁用的 input 元素设置背景色：

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]:enabled {
  background: #ffff00;
}
input[type=text]:disabled {
  background: #dddddd;
}
</style>
</head>
<body>
<form action="">
  姓氏: <input type="text" value="Mickey"><br>
  名字: <input type="text" value="Mouse"><br>
  国籍: <input type="text" disabled="disabled" value="Disneyland">
</form>
</body>
</html>

运行一下

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

选择器
:disabled	4.0	9.0	3.5	3.2	9.6

定义和用法

:disabled 选择器匹配每个被禁用的元素（大多用在表单元素上）。

更多实例

为所有已禁用的 input 元素设置背景色：

<!DOCTYPE html>
<html>
<head>
<style>
input:enabled {
  background: #ffff00;
}
input:disabled {
  background: #dddddd;
}
</style>
</head>
<body>
<form action="">
  姓氏: <input type="text" value="Mickey"><br>
  名字: <input type="text" value="Mouse"><br>
  国籍: <input type="text" value="Disneyland" disabled><br>
  密码: <input type="password" name="password" value="psw" disabled><br>
  E-mail: <input type="email" value="john@doe.com" name="usremail">
</form>
</body>
</html>

运行一下

为所有禁用的<option>元素设置背景颜色：

<!DOCTYPE html>
<html>
<head>
<style>
option:disabled {
  background: red;
}
</style>
</head>
<body>
<select>
  <option value="benz">奔驰</option>
  <option value="bmw" disabled>宝马</option>
  <option value="audi">奥迪</option>
  <option value="porsche" disabled>保时捷</option>
</select>
</body>
</html>

运行一下

CSS :disabled 选择器

实例

浏览器支持

定义和用法

更多实例

相关页面

分类导航