Styling readonly input fields with CSS

This snippet looks at how to style read only input fields using CSS.


Styling readonly inputs depends on your HTML markup, you will commonly see the following code used to make an input readonly:

<input type="text" readonly="readonly">

However all that is required to make an input box readonly is the attribute title itself like so:

<input type="text" readonly>


The following CSS styling caters for the two above scenarios, removing the border from readonly inputs:




Sign Up

NEXT: Build an HTML5 responsive contact form

In this tutorial we'll be using the latest HTML5 form attributes with modern CSS responsive techniques to create a flexible, cross-platform contact form.

comments powered by Disqus

Popular Tags

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.