How to change the font-color of disabled input using CSS ?
Last Updated :
08 Aug, 2021
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 >
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.
Share your thoughts in the comments
Please Login to comment...