CSS3 selectors: enabled Selector

In Web forms, some form elements available ( ": enabled") and are not available ( ": disabled") state, such as input box, password box, check box and so on. Under default, these form elements are in a usable state. So we can pseudo selector ": enabled" set the style for the form elements.

Example shows

By ": enabled" selector, modify the text input box as a red border border 2 pixel, and set its gray background.

HTML code:

<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 code:

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