making different options bold

Sarky78 · May 22, 2006

Hi,

I've tried a few very simple things and don't think that this can actually be done, but before I tell the client that i thought i'd ask here.

Does anyone know how to make different items with a select different font-weights?

I have a county/town sort of thing in a drop down list, and I want to make some options bold to hightlight that they are a county and then others under that to stay as normal text.

I know about the optgroup, but the problem with this is that I need to have the bold option as selectable.

Any one got any ideas?

TIA

Tony

Foamcow · May 22, 2006

Use CSS to define a class that makes particular options bold.

This works in FF. Not sure about IE at the moment as I am not near a PC.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]

<head <html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

<title>Page Title</title>
<meta name="Author" content="Pete Eveleigh" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />

<style type="text/css">
/*<![CDATA[*/
	option {
		font-weight:normal;
	}
	option.heavy {
		font-weight:bold;
	}
/*]]>*/
</style>
</head>

<body>
<form>
	<select>
		<option select="selected">Option 1</option>
		<option class="heavy">Option 2</option>
		<option>Option 3</option>
		<option class="heavy">Option 4</option>
	</select>
	
</form>

</body>
</html>

<honk>*:O)</honk>
Foamcow Heavy Industries - Web site design in Cheltenham and Gloucester
Ham and Jam - British & Commonwealth forces mod for Half Life 2

Sarky78 · May 22, 2006

Thanks for the response. yeah that is what i have come up with so far, and it only works in FF and not in IE which is a pain.

thanks for your input though

Tony

ChrisHunt · May 22, 2006

Browsers vary widely in what CSS they apply to form elements and how they apply it, see

http://www.456bereastreet.com/archive/200409/styling_form_controls/

for examples. I'd suggest using a different foreground and/or background colour as well as the bolding to give yourself the best chance of something showing up in everyone's browser.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

making different options bold

Sarky78

Programmer

Foamcow

Programmer

Sarky78

Programmer

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor