Cross browser disabled input field

Preface

The html input field is used almost everywhere on the web, to get input from the user. There are certain times when you would like the user to know that its possible to change some field, but not at the current moment. For those times you are supposed to use the attribute named “disabled”.

When the attribute disabled is set, it is supposed to have the following effect:

Step 1 – clean html

The first thing to do is of course to see how it looks in different browsers. The test page has two form elements, one disabled and one normal, and has been tested on 4 different modern browsers on Windows XP.

  • Internet Explorer 8
  • Mozilla Firefox 3.5
  • Google Chrome 3.0
  • Opera 10.1

This is the full source code for the test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Input type text</title>
	</head>
	<body>
		<form action="#">
			<p>
				<input type="text" value="I am normal" />
				<input type="text" value ="I am disabled" disabled="disabled" />
			</p>
		</form>
	</body>
</html>

And here are the results of the first test.

Step 2 – add css

As you see, there are visual differences in both border color, background-color, font-color, font-size, font-type and size. To make it a bit better, I’ll add a stylesheet, than will iron out the most of the differences, and add a nice background color, just for fun. I will use the css attribute selector to get the disabled field, since that is supported on the four browsers I tested against. If you need support for older browsers that does not support the attribute selector, you need to add classes to the disabled input fields, e.g. class=”disabledInput”.

I just added the following line into the head of the html:

<link rel="stylesheet" href="style.css" type="text/css" />

And here is the corresponding stylesheet

body {
	background-color:#8CC2FC;
	font-size: 0.85em;
}
body, input {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
}
input {
	width:160px;
	border:1px solid #888;
	padding: 3px;
}
input[disabled] {
	background-color:white;
	color: #333;
	opacity:0.6;
}


As you see I have made the disabled appearance by changing the opacity of the input field. But Microsoft Internet Explorer has no support for the opacity, but they come to the rescue with filters.
Add this line of code below the opacity line, and it will work for IE too.

filter:alpha(opacity=60);

If you need backwards compability with even older safari and firefox versions, you can read more about this on css-tricks.com

Step 3 – modify behaviour

Almost done, except the font color. It seems that both Opera and IE will not let us change the font-color of a disabled input field. But if you change the field to be readonly instead of disabled, you are able to change the font color. This can be solved by client side scripting, just check wether the client is IE or Opera, then switch from disabled to readonly.

When the readonly attribute is set, its supposed to have the following effect:

  • Read-only elements receive focus but cannot be modified by the user.
  • Read-only elements are included in tabbing navigation.
  • Read-only elements may be successful.

This means that if you use the readonly attribute, you should include scripting to make sure readonly fields does not receive focus, make sure they are skipped if you use tab navigation, and make sure that handling of the form accounts for fields that was previously disabled, and not successful, now are readonly and successful.

Here is the finished html, css and the final screenshot.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Input type text</title>
		<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
		<form action="#">
			<p>
				<input type="text" value="I am normal" />
				<input type="text" value ="I am disabled" readonly="readonly" />
			</p>
		</form>
	</body>
</html>
body {
	background-color:#8CC2FC;
	font-size: 0.85em;
}
body, input {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.85em;
}
input {
	width:160px;
	border:1px solid #888;
	padding: 3px;
}
input[readonly] {
	background-color:white;
	color: #333;
	opacity:0.6;
	filter:alpha(opacity=60);
}

The html are valid XHTML 1.0 strict, but the css is of course not valid since we have added IE’s filter setting. If you need the CSS to be valid too, you could write a script that takes hold of the background-color for the input’s parent, and make a 60% color, and set that directly to each readonly/disabled inputfield.

About these ads
Explore posts in the same categories: WebStuff

Tags: , , ,

You can comment below, or link to this permanent URL from your own site.

One Comment on “Cross browser disabled input field”


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: