The :disabled selector matches every disabled element, while the :enabled selector does the same for every enabled element (mostly used on form elements). This example sets background colors for disabled and enabled input elements of type="text":
HTML file: | Displayed by browser: |
---|---|
<style>
input [type=text]:enabled { background: yellow; } input [type=text]:disabled { background: lightgrey; } </style> <body> <form action=""> First name: <input type="text" value="Mickey"> <br /><br /> Last name: <input type="text" value="Mouse"> <br /><br /> Country: <input type="text" disabled="disabled" value="Disneyland"> </form> </body> |
All disabled input text types have lightgrey backgrounds, while the enabled types have yellow backgrounds.