The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

/* Selects any disabled <input> */ input:disabled {   background: #ccc; } 

:disabled

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

/* Selects any disabled <input> */ input:disabled {   background: #ccc; } 

Syntax

:disabled

Examples

This example shows a basic shipping form. It uses the JavaScript change event to let the user enable/disable the billing fields.

HTML

<form action="#">   <fieldset id="shipping">     <legend>Shipping address</legend>     <input type="text" placeholder="Name">     <input type="text" placeholder="Address">     <input type="text" placeholder="Zip Code">   </fieldset>   <br>   <fieldset id="billing">     <legend>Billing address</legend>     <label for="billing-checkbox">Same as shipping address:</label>     <input type="checkbox" id="billing-checkbox" checked>     <br>     <input type="text" placeholder="Name" disabled>     <input type="text" placeholder="Address" disabled>     <input type="text" placeholder="Zip Code" disabled>   </fieldset> </form> 

CSS

input[type="text"]:disabled {   background: #ccc; } 

JavaScript

// Wait for the page to finish loading document.addEventListener('DOMContentLoaded', function () {   // Attach `change` event listener to checkbox   document.getElementById('billing-checkbox').onchange = toggleBilling; }, false);  function toggleBilling() {   // Select the billing text fields   var billingItems = document.querySelectorAll('#billing input[type="text"]');    // Toggle the billing text fields   for (var i = 0; i < billingItems.length; i++) {     billingItems[i].disabled = !billingItems[i].disabled;   } } 

Result

Specifications

Specification
HTML Standard # selector-disabled
Selectors Level 4 # enableddisabled

See also

:enabled

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) Change language