Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox won't show background color for selected option

color is correct however in option list



6:19 pm on Mar 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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="1">1</option>
<option value="2" select="selected" style="background:yellow">2</option>
<option value="3">3</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.

Probably only fixable with javascript but maybe someone knows of a hack?

[edited by: amznVibe at 6:22 pm (utc) on Mar. 6, 2008]


7:00 pm on Mar 6, 2008 (gmt 0)

5+ Year Member

Try this, standard's compliant approach:


<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>


8:29 pm on Mar 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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.

I think I'll have to come up with some javascript to solve this.


8:49 pm on Mar 6, 2008 (gmt 0)

5+ Year Member

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.


10:05 pm on Mar 6, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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]


10:49 pm on Mar 6, 2008 (gmt 0)

5+ Year Member

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.


11:54 am on Mar 7, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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.


12:33 am on May 29, 2008 (gmt 0)

5+ Year Member

I came across exactly the same need today and found this thread while searching for solutions.

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: Gecko/20080404 Firefox/

[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>

Hope it helps


1:26 am on May 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

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.


2:22 am on May 29, 2008 (gmt 0)

5+ Year Member

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.

[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>

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]


Featured Threads

Hot Threads This Week

Hot Threads This Month