Question

I’m having troubles with textareas readonly attribute. I’m using JQuery to set the attribute, like this :

$("#mytextarea").prop("readonly", true);

The CSS :

textarea { width: 400px; height: 400px; }
textarea[readonly] { overflow: auto; }

The HTML :

<textarea id="mytextarea">Lorem ipsum [...] ament.</textarea>

In Internet Explorer 9, the scrollbars are not showned so users can’t read the overflow content. The behavior with all others majors browsers is correct : the field is not editable but users can freely scroll inside it.

How to fix this?

Answer 1

From http://www.w3schools.com/cssref/pr_pos_overflow.asp

visible The overflow is not clipped. It renders outside the element’s
box. This is default

hidden The overflow is clipped, and the rest of the content will be
invisible

scroll The overflow is clipped, but a scroll-bar is added to see the
rest of the content

auto If overflow is clipped, a scroll-bar should be added to see the
rest of the content inherit Specifies that the value of the overflow
property should be inherited from the parent element

Try out “scroll” as the value of overflow property like this :

Change : overflow: auto; to overflow: scroll;

Since it does what you not want only in IE9 and if you want to keep auto for other broswer. Create two CSS files and use this code inside your HTML :

<!--[if IE 9]>
    <link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->

and put overflow: scroll; inside the ie9.css and overflow: auto; inside your regular CSS.

EDIT: Scott suggested, I do too, try to read this link http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ … about how to incorporate multiple css for each browser. It’s a good idea and a good way to reduce HTTP request.