styling - option selected="selected" ??

**Arkymedes** · Feb 11th, 2008, 03:51 AM

Hi ppl, is there a way to css style the "selected" option from a list?

It's like, I have a country list in a drop down box selection, with a fixed font-size of 10px. But this size only applies to the ones that are not selected. Once you select any option, the size becomes different.

Is there a solution for that?

Thanks in advance!

**Web Design Forums** · Feb 11th, 2008 03:51 AM

**mlseim** · Feb 11th, 2008, 06:08 AM

I experimented a couple of minutes ...
I'm only able to affect color, nothing else:

<html>
<body>
<select name="test">
<option>Item1</option>
<option style="background-color: #c00000; color:#fff;">Item2</option>
<option>Item3</option>
<option>Item4</option>
<option>Item5</option>
<option>Item6</option>
<option>Item7</option>
<option>Item8</option>
</select>
</body>
</html>

**Arkymedes** · Feb 11th, 2008, 06:58 AM

Hi!

I mean, I want only to style the "selected" portion of the option list.

Is there a class or attribute definition in CSS for that?

Something that looks like

option selected {
font-size: 10px;
}

This is a real example from my code:

HTML Code:

<select class="input_country" name="country">
     <option value="" selected="selected">--- Choose ---</option>
     <option value="EST">Eesti</option>
     <option value="FIN">Suomi</option>
     <option value="RUS">Russia</option>
     <option value="KVO">Alien Passport</option>
     <option value="S">Sweden</option>
     <option value="A">Austria</option>
     <option value="F">France</option>
</select>

Thanks!

**bfsog** · Feb 11th, 2008, 07:47 AM

HTML Code:

<html>

<head>

<title>CSS styled forms</title>

<style type="text/css" media="all">

.blue_style
   {
	color: white;
	background-color: blue;
   }

.red_style
   {
	color: yellow;
	background-color: red;
   }

</style>

</head>

<body>

<form name="test" action="" method="post">

<select name="country">
     <option value="" selected="selected">--- Choose ---</option>
     <option value="EST">Eesti</option>
     <option value="FIN" class="blue_style">Suomi</option>
     <option value="RUS">Russia</option>
     <option value="KVO">Alien Passport</option>
     <option value="S" class="red_style">Sweden</option>
     <option value="A">Austria</option>
     <option value="F">France</option>
</select>

</form>

</body>
</html>

That does not solve your problem, maybe add an event handler to the select and change/give the selected a color etc.

**Shadowfiend** · Feb 11th, 2008, 08:06 AM

Why yes, as it turns out, there is a selector for that:

Code:

option[selected=selected] {
 /* ... */
}

Or:

Code:

option[selected] {
 /* ... */
}

Unfortunately, IE doesn't support it. So you'll have to go for a Javascript solution based on onChange instead. Yay IE!

EDIT: I don't actually know, by the way, if this will work with selected elements. It'll only work if the browser sets the selected attribute on the option element, which may well not be the case. That is, in general, the way to select on attribute values other than the class and id attributes. It's pretty cool, except for the part where IE doesn't support it.

**Arkymedes** · Feb 11th, 2008, 08:40 AM

I will give it a try and post the results! Thanks!

Thread: styling - option selected="selected" ??

LinkBack

Thread Tools

Search Thread

Display

Remove Ads

Posting Permissions

Search tags for this page

css option selected

css option unselected

css select option selected color

css select option style

css unselected options

html select option selected color style

select option css selected

select option css style

select option selected css

select style select option