OPTION SELECTED, CSS and IE

Hallo,

another afternoon is gone while searching a solution on this… at the end I have to give up and hope somebody will help me :frowning:

The HTML code:

<fieldset id=“c-beta2”>
<legend id=“form”>Aircraft in the database</legend>

<select id=“form” name=“n_list” size=“2” multiple>

<option id=“form” value=“0”>aereo di pietro, 32, 31</option>
<option id=“form_sel” selected value=“1”>aereo di paperino, 17, 28</option>
<option id=“form” value=“2”>aereo di pluto, 25, 30</option>
<option id=“form_sel” selected value=“3”>aereo di topolino, 25, 29</option>

</select>
</fieldset>

The CSS code:

select#form, option#form
{
font-size: 11pt;
background-color: #CCCCFF;
border-color: #009900;
margin-right: 4px;
padding-top: 0px;
padding-bottom: 0px;
}

option#form_sel
{
color: white;
font-weight: bold;
}

The question:
On Mozilla browsers I get the text in bold for the selected options, in IE not.

Is there any way to get the selected lines in bold even on IE?!?

Also, I cannot find a way to change the look of the line where the cursor is positioned in the list: what value should I set in the CSS file?

Thank you so much,

You can only have one of each id on a page, so you can’t use multiple occurrences of “id=form” and id=“form_sel”. Try changing them to classes instead.

thank you for your post Bradley,

:shifty:

<fieldset id=“c-beta2”>
<legend class=“form”>Aircraft in the database</legend>

<select class=“form” name=“n_list” size=“2” multiple>

<option value=“0”>aereo di pietro, 32, 31</option>
<option class=“form_sel” selected value=“1”>aereo di paperino, 17, 28</option>
<option value=“2”>aereo di pluto, 25, 30</option>
<option class=“form_sel” selected value=“3”>aereo di topolino, 25, 29</option>

</select>
</fieldset>

.form
{
font-size: 11pt;
background-color: #CCCCFF;
border-color: #009900;
margin-right: 4px;
padding-top: 0px;
padding-bottom: 0px;
}

.form_sel
{
color: white;
font-weight: bold;
}

maybe I am doing something wrong but it still does not solve the problem…
:cry:

You’re not the only one having problems with this:

http://archivist.incutio.com/viewlist/css-discuss/55918
http://www.webdeveloper.com/forum/showthread.php?t=59530

It looks like you can’t apply font-weight to <option> tags in IE. :frowning:

Ouch… Anyone else can confirm or has a clue?

Thank you,

Hi,

Drop downs are notoriously hard to style and the browsers only allow you to style selected parts and this varies between browsers. The chances are that if the style is not showing then its not available to be styled.

You can get all the drop downs to be bold by adding font-weight:bold to .form instead. It also looks like you will have to lose the padding statements from .form as my firefox is hiding the arrow buttons when the padding styles are there.

Here’s a link to form styling that might prove useful.

http://www.456bereastreet.com/archive/200410/styling_even_more_form_controls/

Hope that helps.

Thank you Paul, I even learned that it is not possible to change colors in the radio/checkbox buttons.

While waiting to get a better IE version (!) I will use the font color… Its a pity most of the users seem to use IE, at least on windows.

take care,