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:

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

Output

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

Apple Safari 3.2
Google Chrome 4.0
Firefox 3.5
Opera 9.6
Internet Explorer 9.0

More Selectors:

My Personal Notes

Recommended Posts: