Forum Moderators: not2easy
<select>
<option value="1">1</option>
<option value="2" select="selected" style="background:yellow">2</option>
<option value="3">3</option>
</selct>Basically when sitting there, the option box should have a yellow background.
It does show up in all browsers correct when the list is open, but not in Firefox when the list is closed and the item is selected.
To make it work in firefox, you'd have to set the "select" to yellow also
but of course that would make them all yellow.
Probably only fixable with javascript but maybe someone knows of a hack?
[edited by: amznVibe at 6:22 pm (utc) on Mar. 6, 2008]
option[selected]{background-color:yellow}
<select>
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
Background works when list is open, not when closed and visible.
I think I'll have to come up with some javascript to solve this.
In fact it's completely logical that if a line shows a certain background when open, if it's in view when closed, it should maintain that color. Imagine if it was a list of typefaces and it was rendered in that font - you'd expect it to display the font-face even when closed if it's in view. So same logic for a list of colors with the color in view.
[edited by: amznVibe at 10:07 pm (utc) on Mar. 6, 2008]
I never read in CSS 2.1 anything how a user agent should handle input fields (and e.g. safari and a few others over the years have had a very distinct way of rendering input fields).
The candidate for CSS3 (iow. not yet a standard) does have some more regarding forms in it. But even there it seems there is freedom for the user agent to choose how to render it.
For CSS3 this is probably the most relevant: [w3.org...]
My opinion would that there is no right nor wrong way at the moment.
Solved the issue using javascript; code below for those who are interested.
Tested in IE7 and FF (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.14) Gecko/20080404 Firefox/2.0.0.14)
[2][b]<select name="select" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
<option value="#">Please select</option>
<option value="#" style="background-color:#FF0000;">Red</option>
<option value="#" style="background-color:#00FF00;">Green</option>
<option value="#" style="background-color:#0000FF;">Blue</option>
</select>[/b][/2]Hope it helps
On generation, the initial background color of the <select> is set to that required (the same as the background colour of the selected <option>) - as per MarkFilipak's post.
In the case of a booking / availability planner (*work in progress) .. three states exist. Booked (Red), Provisionally booked (Amber), Available (Green)
In this example, the weekend in question is booked, so the initial background colour of the <select> is set to red.
[2][b]<select name="select" style="background-color:#F08080;" onChange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor">
<option style="background-color:#F08080;" value="1" selected>Booked</option>
<option style="background-color:#FFE289;" value="2">Provisional</option>
<option style="background-color:#98FB98;" value="3">Available</option>
</select>[/b][/2]Yep. Agree with you. I was suprised that wasn't the case with FF, yet logically I can see both sides of the story. The select has a style, the option has a style .. so which to use if an selected option is shown in the select box? My logic says, that we should see the style of the select box as that is what we are looking at. Yet.. we are also looking at a selected option. So others think differently and overide the style of the select box with the style of the selected option. Yet, luckily we still do have some control :)
[edited by: Hatticus at 2:42 am (utc) on May 29, 2008]
