CSS :disabled Selector

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: Here is the example of the above-explained selector.

html

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

html

<!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>