Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 08 Aug, 2021
Improve Article
Save Article

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:


<input disabled>


input:disabled {
    color: black;


<!DOCTYPE html>
        How to change font-color for
        disabled input using CSS?
        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
            color: black;
        Enable Input : <input value="Enabled"><br>
        <!-- Disabled this input using
            attribute: disable -->
        Disable Input: <input value="Disabled"


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.

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!