Fomatting "<input type=text readonly..." fields using CSS

Dev Shed Forums Sponsor:

October 21st, 2003, 05:06 AM

simoncurran

Junior Member

Join Date: Oct 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

Fomatting "<input type=text readonly..." fields using CSS

Can anyone tell me how to change the colour of an input field on a form when it is readonly so that the user knows that it is readonly. Would like to be able to accomplish this by simply adding some code to the css file so that I don't have to update the existing jsp's.

Thanks,
Simon.

October 21st, 2003, 10:51 AM

mrrichardfeder

Contributing User

Join Date: Nov 2001

Posts: 765

Time spent in forums: 3 m 45 sec
Reputation Power: 7

The good news: CSS2.

Code:

input[readonly] {background: buttonface;}

The bad: you got it - not in IE (except IE5+ Mac).

How stringent is that restriction?

October 21st, 2003, 11:01 AM

simoncurran

Junior Member

Join Date: Oct 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

The project spec is IE5 so I'll give the "input[readonly]" tag a go. I've started to remove all the readonly feilds and replace then with simple text but it will be a greadt help if I can change the colour in the css.

Is the style sheet defined in exactly the same way, i.e. can I simply slot the "input[readonly]" tag into the existing stylesheet?

Thanks very much for you help.

Simon.

October 21st, 2003, 11:06 AM

mrrichardfeder

Contributing User

Join Date: Nov 2001

Posts: 765

Time spent in forums: 3 m 45 sec
Reputation Power: 7

Simon....oops.

Quote:

...not in IE

Sorry.

Yes to your second question. It's a selector.

http://www.yourhtmlsource.com/style....html#attribute
http://www.xs4all.nl/~ppk/css2tests/intro.html

October 21st, 2003, 11:15 AM

simoncurran

Junior Member

Join Date: Oct 2003

Posts: 3

Time spent in forums: < 1 sec
Reputation Power: 0

Thanks for you help. The sites included are very useful. I wonder how long before IE will support?

Simon.

October 21st, 2003, 11:40 AM

mrrichardfeder

Contributing User

Join Date: Nov 2001

Posts: 765

Time spent in forums: 3 m 45 sec
Reputation Power: 7

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<style type="text/css">

input.readonly {background: buttonface;}

</style>
<script type="text/javascript" language="javascript">

function init_fields()
{
	var el, els, e, f = 0, form, forms = document.getElementsByTagName('form');
	while (form = forms.item(f++))
	{
		e = 0; els = form.getElementsByTagName('input');
		while (el = els.item(e++))
			if (el.readOnly)
				el.className = 'readonly';
	}
}

onload = init_fields;

</script>
</head>
<body>
<form>
<input id="readonly" type="text" name="readonly" value="readonly" readonly="read-only">
<input id="readwrite" type="text" name="readwrite" value="read/write">
</form>
</body>
</html>

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: