CSS | :disabled Selector

Last Updated : 04 Dec, 2018

The :disabled selector is used to select the disabled element. This property is mostly used on the form elements.

Syntax:

:disabled {
    // CSS property
}

You can also Set a background color for all disabled input elements of type=”text”:

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

Example 1:

<!DOCTYPE html>
<html>
    <head>
        <title>disable property</title>
        <style> 
            h1 {
            color:green;
            }
            input[type=text]:enabled {
                background: green;
            }
              
            input[type=text]:disabled {
                background: white;
            }
            input {
                width:150px;
                padding-left:10px;
                margin-top:10px;
                border:1px solid black;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksforGeeks</h1>
        <h2>:disabled Selector</h2>
        <form action="">
            Author Name: <input type="text" value="Geeks"><br>
            College Name: <input type="text" value="GFG"><br>
            Country: <input type="text" disabled="disabled" 
            value="India">
        </form>
    </body>
</html>                    

Output:

Example 2:

<!DOCTYPE html>
<html>
    <head>
        <title>disable selector</title>
        <style> 
            h1 {
                color:green;
            }
            body {
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>GeeksForGeeks</h1>
        <h2>:disabled Selector</h2>
        <select>
            <option value="s1">Data Structure</option>
            <option value="s2" disabled>Algorithm</option>
            <option value="s3">Operating System</option>
            <option value="s4" disabled>HTML</option>
            <option value="s5">C programming</option>
        </select>
    </body>
</html>                    