For the above scenario, we need to use a pseudo-class to achieve this. pseudo-class is a special keyword which is added to a selector which specifies the state of the element. There are around ~60 pseudo-classes available.  We use: read-only pseudo-class here in order to achieve selecting the right element and to make the selector only select the not editable one. /* :read-only pseudo-class is used for the input element */
input:read-only{
background: cyan;
} From the above code, we can see that we have used the input selector to select the input element, and the: read-only pseudo-class targets the required element. And the cyan color is added using background property. Expect to come across this popular HTML CSS interview question.