To apply CSS styles on readonly inputs, you can use the :read-only pseudo-class. The :read-only pseudo-class affects only those elements which are set to read-only mode by inserting the readonly attribute.
Let’s say we have the below two input elements and the second input is set to read-only mode by adding a readonly attribute to it:
First Name: <input type='text' placeholder='Enter first name'><br><br> Last Name: <input type='text' readonly placeholder='Enter last name'>
Now, to apply CSS styles on the read-only input, we have to append the :read-only pseudo-class on its selector while selecting.
This is how you can do it:
input[type='text']:read-only{
background: lightgrey;
cursor: not-allowed;
}
Here is an image which shows the difference between the readonly and normal input after applying the above CSS:
Thanks for reading.
