:disabled

定义：用来修改任何被禁用的元素的样式。

触发条件：如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。一般用在input元素的radio、checkbox属性和select元素下的option子元素以及button元素中。

兼容：Opera8及8以下 IE8及8以下不支持

举个栗子

html代码：

  <p>
    <input type='radio' name="my-radio" id='yes'/><label for='yes'>yes</label>
    <input type='radio' name="my-radio" id='no'/><label for='no'>no</label>
    <input type='radio' name="my-radio" id='unknown' disabled/><label for='unknown'>Unknown</label>
  </p>
  <br/>
  <p>
    <input type='checkbox' name="my-checkbox" id='A'/><label for='A'>Apple</label>
    <input type='checkbox' name="my-checkbox" id='B'/><label for='B'>Boy</label>
    <input type='checkbox' name="my-checkbox" id='C' disabled/><label for='C'>Car</label>
    <input type='checkbox' name="my-checkbox" id='D'/><label for='D'>Door</label>
  </p>
  <br/> 
  <p>
    <select name="my-select" id="games">
      <option value="opt0" disabled>Default</option>
      <option value="opt1">KOF97</option>
      <option value="opt2">Tetris</option>
      <option value="opt3">Street Fighter</option>
    </select>
  </p>
  <br/>   
  <p><input type='text' placeholder="请输入..."/></p>
  <p><input type='text' placeholder="被禁用..." disabled /></p>
  <br/>
  <p><button type='button'>按钮</button></p>
  <p><button type='button' disabled>禁用按钮</button></p>

css代码：

p{
  height: 20px;
  text-align: left;
  text-indent: 20px;
}
label,button{
  cursor: pointer;
}
button{
  display: inline-block;
  width: 100px;
  height: 20px;
  background: #ac0;
  box-shadow: 0 0 0 2px #ac9;
  color: blue;
}
input[type='radio']:disabled+label{
  border: 1px solid red;
  background-color: #eee;
  color: red;
}
input[type='checkbox']:disabled+label{
  border: 1px solid red;
  background-color: #eee;
  color: red;
}
input:disabled{
  border: 1px solid red;
  background-color: #eee;
}
option:disabled{
  background-color: #eee;
  color: blue;
}
button:disabled {
  background: #eee;
  color: #000;
  box-shadow: 0 0 0 2px red;
}

效果图：

CSS：好玩的‘伪类’系列之——(:disabled)

:disabled

猜你喜欢