“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設(shè)置“disabled”屬性。

示例演示

通過“:disabled”選擇器，給不可用輸入框設(shè)置明顯的樣式。

HTML代碼：

<form action="#">
  <div>
    <input type="text" name="name" id="name" placeholder="我是可用輸入框" />
  </div>
  <div>
    <input type="text" name="name" id="name" placeholder="我是不可用輸入框" disabled />
  </div>
</form>  

CSS代碼

form {
  margin: 50px;
}
div {
  margin-bottom: 20px;
}
input {
  background: #fff;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 3px;
}
input[type="text"]:disabled {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.15);
}

結(jié)果演示：