How to Apply CSS on Readonly Inputs?

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:

    background: lightgrey;
    cursor: not-allowed;

Here is an image which shows the difference between the readonly and normal input after applying the above CSS:

Apply CSS on readonly inputs

Thanks for reading.


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.