Open In App

CSS :disabled Selector

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>


Output: Supported Browsers: The browser supported by :disabled selector are listed below:

  • Apple Safari 3.1 and above
  • Google Chrome 1.0 and above
  • Edge 12.0 and above
  • Firefox 1.0 and above
  • Opera 9.0 and above

More Selectors:



Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads