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

Question

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" />

Joesphjoete

possible duplicate of how to disable keyboard events on an input text box in javascript – Sleep

readonly="readonly", does not make the input grayed. – Gerontocracy

@ParthoGanguly I think his means disabled true..? – Raoul

@Sleep Wrong duplicate vote :) – Debenture

@Mr.Alien: Apparently I was over-thinking it xD – Sleep

@GrijeshChauhan- No, there is difference between readonly, and disabled. – Gerontocracy

@ParthoGanguly readonly is graying out in chrome. see: jsfiddle.net/Valtos/w8tgC – Avril

@ManuelRicharz - I don't find any difference, and I am using Chrome only. – Gerontocracy

readonly doesn't graying out in chrome... and even if it does... you can use background: white; to override it in readonly or disabled inputs – Painty

@ParthoGanguly see my screen: directupload.net/file/d/3523/8wdt76zg_png.htm – Avril

Answer 1

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

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

Dalhousie

Answer 2

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;
}

Mousseline

define a background: white; to set them both the same style – Painty

The main difference between readonly and disabled is that readonly field are sent when the form is submitted, not the disabled ones. – Mousseline

Bootstrap 4 (at least) sets the background colour for read only inputs to a grey colour. Solution (as per @Painty above) is to use <input readonly class="bg-white form-control" value="..." /> – Clothier

Answer 3

<input type="text" class="form-control" value="MyText" readonly />

<style>
    input.form-control:read-only {
        background-color: #fff;
    }
</style>

or

<input type="text" class="form-control" value="MyText" style="background-color: #fff;" readonly />

More info here.

Dela

Answer 4

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.

Neuritis

Answer 5

This works for all input fields:

input:read-only {
    background: whitesmoke;
}

Marjorie