Styling readonly input fields with CSS

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

HTML

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>

CSS

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

input[readonly]
{
    border:0;
}

input[readonly="readonly"]
{
    border:0;
}

 

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
Sign Up

Popular Tags

350x250

Need a web developer?

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