CSS / JavaScript: enter an input field only without changing the background color

Question

I would like to make the HTML input field read-only, but not getting the gray background that appears when I just add the readonly attribute (it should look just like a normal field, it just doesn't allow editing).

Is there a way to implement this in CSS and / or JS, ideally with a class?

Example field:

<input type="text" style="width:96%" class="myClass" /> 

Thanks so much for any help with this, Tim.

Answer 1

Yes, you can use: a disabled pseudo-class, for example.

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

Answer 2

I think you are wrong and disconnected and reading

 <input type="text" value="readonly" readonly> <input type="text" value="disabled" disabled> 

take a look at this script: http://jsfiddle.net/36UwE/

As you can see, only the disabled input is gray (tested on Windows with the latest Chrome and IE)

However, this may vary, depending on the browser, operating system, etc. You can use custom display with css:

 input[readonly] { background-color: white; } 

Answer 3

While you can apply any style using: disabled,: readonly or .myClass CSS selectors, keep in mind that different browsers / platforms will render standard, readonly and disabled input fields differently, so trying to override the color, the default borders and background for your platform (e.g. Windows) may break the style on other platforms (e.g. Mac).

As a general rule, it is not recommended to overestimate the default prompts that users expect, but if you do, you must make sure that the readonly / disabled input fields are visually distinguishable from the standard ones and use a custom style that is not platform-specific.