How to set background color of <select>


T

Tom de Neef

More HTML than Javascript I guess: is there a way to set the background
color of the lines (<option>s) in a <select> field?
In IE I can use style="background:'#234567'" or
style="background-color:'#234567'" but in FF this has no effect.
From reference texts I get the impression there is no attribute for the
color, but I find that hard to believe.
I am using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
as doctype.
TIA
Tom
 
Ad

Advertisements

L

Lasse Reichstein Nielsen

Tom de Neef said:
More HTML than Javascript I guess:

CSS actually.
is there a way to set the background
color of the lines (<option>s) in a <select> field?

Maybe!
Select fields are replaced elements. There are no hard rules as to how
those interact with styling. They could be using plain GUI provided
components, or they could be drawn by the browser.
In IE I can use style="background:'#234567'" or

Drop the apostrophes. It's just "background:#234567".
style="background-color:'#234567'" but in FF this has no effect.

Could be the apostrophes.

I just checked how Opera, IE 7 and Firefox handles styling of
select and option elements.

They all allow setting style on the select element, and setting
overriding styles on the options. Opera and IE shows the select itself
using the style of the selcted option, whereas Firefox only shows
the value of the selected option with the styling of the select element.

You can try something like:

<html>
<title>Select Test</title>
<style type="text/css">
..foo { background: black; color:white; }
..bar { background: transparent; color: red;}
</style>

<select style="background:yellow; color: red;">
<option style="background:green;color:white;">Abelone</option>
<option class="foo">Banana</option>
<option class="bar">Cantaloupe</option>
</select>
From reference texts I get the impression there is no attribute for the
color, but I find that hard to believe.

There isn't. Styling of select elements is not part of the standard.
Where a browser supports it anyway, it is likely that using standard
CSS properties will do the trick, i.e., background-color and color.

/L
 
Ad

Advertisements

T

Tom de Neef

Lasse Reichstein Nielsen said:
CSS actually.


Maybe!
Select fields are replaced elements. There are no hard rules as to how
those interact with styling. They could be using plain GUI provided
components, or they could be drawn by the browser.


Drop the apostrophes. It's just "background:#234567".


Could be the apostrophes.

I just checked how Opera, IE 7 and Firefox handles styling of
select and option elements.

They all allow setting style on the select element, and setting
overriding styles on the options. Opera and IE shows the select itself
using the style of the selcted option, whereas Firefox only shows
the value of the selected option with the styling of the select element.

You can try something like:

<html>
<title>Select Test</title>
<style type="text/css">
.foo { background: black; color:white; }
.bar { background: transparent; color: red;}
</style>

<select style="background:yellow; color: red;">
<option style="background:green;color:white;">Abelone</option>
<option class="foo">Banana</option>
<option class="bar">Cantaloupe</option>
</select>


There isn't. Styling of select elements is not part of the standard.
Where a browser supports it anyway, it is likely that using standard
CSS properties will do the trick, i.e., background-color and color.

Very helpful. Thank you!
What seems to work in IE as well as FF is style in <select> together with
style in <option>:
<select style="background:transparent">
<option style="background:#fff7d5">Yes</option>
</select>

Tom
 

Top