HTML - How to make an input field read-only using CSS

You can't. Not using CSS.

A read-only attribute belongs in HTML (preferably) or JavaScript, but not CSS.

CSS is for presentation. HTML is for document structure. And JavaScript is for behaviour.

You should be able to disable or delete your site's CSS file, without changing how your site works.

You can do it using HTML:

Add the attribute readonly to the input element.

<input type="text" value="Abc" readonly />

It isn't necessary to assign a value to the attribute. The value is ignored.

I.e. Don't write readonly="true" or even readonly="readonly".

Similarly, if you write readonly="false" the attribute value will be ignored, and the browser sees readonly.


Ads by Google


Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath