:disabled

版本：CSS3

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

语法:

E:disabled{sRules}

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

浏览器支持


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

例子

这个例子显示基本的购物表单。通过使用 JavaScript change事件让用户启用/禁用付款字段。

//HTML

<form action="#">
  <fieldset id="shipping">
    <legend>shipping address</legend>
    <input type="text" placeholder="name">
    <input type="text" placeholder="address">
    <input type="text" placeholder="zip code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>billing address</legend>
    <label for="billing_is_shipping">same as shipping address:</label>
    <input type="checkbox" id="billing-checkbox" checked>
    <br>
    <input type="text" placeholder="name" disabled>
    <input type="text" placeholder="address" disabled>
    <input type="text" placeholder="zip code" disabled>
  </fieldset>
</form>

//CSS

input[type="text"]:disabled {
  background: #ccc;
}


//JavaScript


// wait for the page to finish loading
document.addeventlistener('domcontentloaded', function () {
  // attach `change` event listener to checkbox
  document.getelementbyid('billing-checkbox').onchange = togglebilling;
}
, false);

function togglebilling() {
  // select the billing text fields
  var billingitems = document.queryselectorall('#billing input[type="text"]');

  // toggle the billing text fields
  for (var i = 0; i < billingitems.length; i++) {
    billingitems[i].disabled = !billingitems[i].disabled;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input:enabled{
background-color:pink;
}
</style>
</head>
<body>


<p>给选中的输入元素设置背景色</p>
用户名:<input type="text"><br>
密 码 :<input type="password"><br>
</body>
</html>

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

用户名:
密码: