Make input field readonly without changing background colour in CSS or JavaScript

background-color, css, html, javascript, readonly

Solution

Yes, you can use the :disabled pseudo class, e.g.

input.myClass:disabled {
    /* style declaration here */
}

Problem

I would like to make a HTML input field readonly but without getting the grey background that appears when I just add the attribute readonly (it should look the same as a normal field just not allow editing). Is there a way I can realise this in CSS and/or JS, ideally with a class ? Example field: ``` <input type="text" style="width:96%" class="myClass" /> ```

Original source

Related problems