|Firefox won't show background color for selected option|
color is correct however in option list
Surprisingly, IE gets this right, Opera does too, but Firefox, nope.
(Safari is off in it's own little world with custom select boxes)
<option value="2" select="selected" style="background:yellow">2</option>
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.
[edited by: amznVibe at 6:22 pm (utc) on Mar. 6, 2008]
Try this, standard's compliant approach:
<option value="2" selected>2</option>
I'm not sure why you think "standards" will change the behavior
but it makes no difference in your example.
Background works when list is open, not when closed and visible.
Sorry. I misunderstood your problem. If I get it right, you want the CLOSED selection drop down to show yellow even though it's closed. Sorry, I don't think that's correct behavior but your mileage may vary.
I consider it the correct behavior when every other browser does it ;)
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]
Your argument about color doesn't make any sense. When the drop-down is open, you are seeing its option-elements and their background colors. But when the drop-down is closed, you are seeing the select-element and its background color. It's value should be the value of the 'selected' option, but its color? You are attributing a behavior to the select-element that it simply doesn't have according to the HTML specification. What IE does is irrelevant. Of course, you can copy the selected option's background-color to the select-element, but that's what it would take.
Before we get a fight over what standards say, let's first read them.
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.
I came across exactly the same need today and found this thread while searching for solutions.
Tested in IE7 and FF (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:220.127.116.11) Gecko/20080404 Firefox/18.104.22.168)
[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>
Hope it helps
Hatticus, "onchange" will do nothing for the current selected item's background color when the page is loaded. However you've given me an idea that a window.onload could be used, though that's annoying since it's an external item/event to the local option/select.
OK. In my case, the html for my <select></select> is dynamically generated (php/MySQL)
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.
[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>
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]