HTML: cursor showing in readonly input text?

Question

Let's say we have a textbox that's readonly, like so:

<input type="text" readonly />

In IE 9 and FF 4, when I click on this field, a (non-blinking) cursor appears in the field. In Chrome, however, the cursor does not show. (See for yourself at http://jsfiddle.net/hqBsW/.)

I suppose I understand why IE/FF opt to show the cursor—so the user knows he or she can still select the value in the field.

Nonetheless, it's evidently confusing our users and we would like to change IE/FF to not show the cursor, as Chrome does for readonly fields.

Is there a way to do this?

Answer 1

Sounds like a bug!

There is a similar bug (396542) open with Mozilla, saying that the cursor should blink in readonly inputs — but that behavior feels wrong, a blinking cursor is supposed to mean, “you can type here.”

You should comment on that bug and/or file new ones (with Mozilla here and with Microsoft here)!

In the meantime, using disabled or changing the behavior with JavaScript, as @nikmd23 suggested, seems like the best workaround.

Answer 2

For a CSS only fix, use :

input[readonly] {
  pointer-events: none;
}