homepage Welcome to WebmasterWorld Guest from 54.205.189.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Firefox won't show background color for selected option
color is correct however in option list
amznVibe




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

Surprisingly, IE gets this right, Opera does too, but Firefox, nope.
(Safari is off in it's own little world with custom select boxes)

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

 

MarkFilipak




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

Try this, standard's compliant approach:

option[selected]{background-color:yellow}

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

amznVibe




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

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.

MarkFilipak




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

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.

amznVibe




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

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]

MarkFilipak




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

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.

swa66




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

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.

Hatticus




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

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

amznVibe




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

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.

Hatticus




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

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>
</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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved