Open In App

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

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

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:




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


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.



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