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

I think you mistook disabled and readonly

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

have a look to this fiddle : http://jsfiddle.net/36UwE/

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

However, this may differ, according the browser, operating system and so on. You can use custom the display with css:

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

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

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

While you can apply any styling using :disabled, :readonly or .myClass CSS selectors, be aware that different browsers/platforms will render the standard, readonly & disabled input fields differently, so trying to override color, borders and background based on the defaults for your platform (e.g. Windows) might break the styling on other platforms (e.g. Mac).

It's usually not a good idea to override the default styling cues that users expect, but if you must do this then you should ensure that readonly/disabled input fields are visually discernible from standard ones, and use custom styling that is not platform-specific.