在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復(fù)選框等。在默認(rèn)情況之下，這些表單元素都處在可用狀態(tài)。那么我們可以通過(guò)偽選擇器“:enabled”對(duì)這些表單元素設(shè)置樣式。

示例演示

通過(guò)“:enabled”選擇器，修改文本輸入框的邊框?yàn)?像素的紅色邊框，并設(shè)置它的背景為灰色。

HTML代碼:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用輸入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用輸入框"  disabled="disabled" />
  </div>
</form>  

CSS代碼：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
}

結(jié)果演示