How to change the font-color of disabled input using CSS ?

In this article, we are going to learn how to change the font-color of disabled input. There is a method to solve this problem, which is discussed below:

Approach: With adding basic CSS property we are able to change the font-color of a disabled input. The disabled input element is unusable and un-clickable. This is a boolean attribute. Here using the color property of input we can change the font-color of this disabled input element.
Below is the Syntax and implementation of the above approach:

Syntax:
HTML:

<input disabled>

CSS:

input:disabled {
    color: black;
}

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to change font-color for
        disabled input using CSS?
    </title>
  
    <style>
        input {
  
            /*it makes grey background and 
            white font-color of a input*/
            background: grey;
            color: white;
        }
      
        input:disabled {
            /*css declaration to make 
            font-color of disable input
            black*/
            color: black;
        }
    </style>
</head>
  
<body>
    <form>
        Enable Input : <input value="Enabled"><br>
  
        <!-- Disabled this input using
            attribute: disable -->
        Disable Input: <input value="Disabled"
                    disabled><br>
    </form>
</body>
  
</html>

chevron_right


Output:
output

Explanations: First input element is enabled and the second input element is disabled. Using CSS properties we have an initialized background of all input elements as grey and font-color as white. We have to change white font-color of the disabled input to any color.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.