Internet Explorer 8: How to do read-only text input, no cursor

Question

I am trying to simulate the appearance of disabled Firefox text input: textarea and input text.

The only browser compatibility I have to worry about is Internet Explorer 8. I don't have to worry about anything before (Intranet)

Internet Explorer does not allow you to change the text color of disabled test input. This allows you to change the background color, but the gray text on the gray background color was fuzzy.

I have an input field and a text area declared as follows:

<input name="Count" id="Count" onfocus="this.blur()" type="text" readOnly="readonly" value="0"/> <textarea name="Notes" id="Notes" style="width: 100%;" onfocus="this.blur()" rows="10" cols="20" readOnly="readonly"/> 

I have the following styles applied through CSS:

 input[readonly], textarea[readonly] { color:black !important; background-color: threedface !important; } 

Visually, this works great in both Firefox and IE. However, IE still allows the cursor to enter a text area or text field. What am I missing?

Addition

By cursor, I mean the keyboard cursor, for example, when you enter the answer here.

Perhaps my problem is better stated, as the user can still click on the text area and display the keyboard cursor. It looks like the blinking cursor is quickly disappearing.

Answer 1

try adding a cursor property to your css

 input[readonly], textarea[readonly] { color:black !important; cursor: default; background-color: threedface !important; } 

http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default

--- 12/01/27

Repeating this solution, I found a job for me, I hope it is useful for you:

Answer 2

Use this simple jQuery function in a script tag for all read-only input fields. You can even use any specific identifier or class if you need only for a specific element.

 $('input[readonly]').focus(function(){ this.select(); }); 

Answer 3

Can you use disabled=disabled instead of readonly=readonly ?