CSS :disabled

The CSS :disabled pseudo-class targets form elements that are in a disabled state. It is commonly used to style elements such as <input>, <textarea>, <button>, and <select> that cannot be interacted with by the user.

The syntax for the :disabled pseudo-class is:

</>
Copy
selector:disabled {
    property: value;
}

Where:

ParameterDescription
selectorThe form element (e.g., <input>, <textarea>) to which the :disabled pseudo-class will apply.
propertyThe CSS property to style the element.
valueThe value assigned to the CSS property.

Examples

1. Styling Disabled Input Fields

In this example, disabled <input> fields are styled with a gray background and italic text.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:disabled {
            background-color: lightgray;
            font-style: italic;
            color: darkgray;
        }
    </style>
</head>
<body>
    <form>
        <label>Enabled Field:</label>
        <input type="text" placeholder="Enabled"><br><br>
        <label>Disabled Field:</label>
        <input type="text" placeholder="Disabled" disabled>
    </form>
</body>
</html>

2. Styling Disabled Buttons

Here, disabled <button> elements are styled with a lightgray background and a strikethrough text effect.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        button:disabled {
            background-color: lightgray;
            text-decoration: line-through;
            color: gray;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <button>Enabled Button</button>
    <button disabled>Disabled Button</button>
</body>
</html>

3. Styling Disabled Textareas

In this example, disabled <textarea> elements are styled with a light yellow background and a border.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        textarea:disabled {
            background-color: lightyellow;
            border: 2px solid gray;
            color: darkgray;
        }
    </style>
</head>
<body>
    <textarea placeholder="Enabled" rows="4" cols="30"></textarea><br><br>
    <textarea placeholder="Disabled" rows="4" cols="30" disabled></textarea>
</body>
</html>

4. Styling Disabled Select Dropdowns

Here, disabled <select> dropdowns are styled with a gray border and a lighter background.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        select:disabled {
            background-color: lightgray;
            border: 1px solid gray;
            color: darkgray;
        }
    </style>
</head>
<body>
    <select>
        <option>Enabled Option</option>
        <option>Another Option</option>
    </select><br><br>
    <select disabled>
        <option>Disabled Dropdown</option>
    </select>
</body>
</html>

5. Styling Disabled Links

In this example, disabled links are styled to appear grayed out and non-clickable using additional HTML attributes and CSS.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a[disabled] {
            pointer-events: none;
            color: gray;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">Enabled Link</a><br><br>
    <a href="#" disabled>Disabled Link</a>
</body>
</html>