How to set background color of <select>

Tom de Neef · Mar 27, 2008

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

Lasse Reichstein Nielsen · Mar 27, 2008

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

Tom de Neef · Mar 28, 2008

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

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
How to access the background color of a div element ?	3	Dec 12, 2006
Help with Visual Lightbox: Scripts	2	May 3, 2023
Multi select options in a menu	1	Oct 30, 2022
How to use PDF-lib and how to center each line of texts on the page?	1	Aug 16, 2023
How to change star rating color on mouseenter, on mouseout, and on onclick	0	Sep 28, 2018
Snowing Effect	2	Apr 24, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022

How to set background color of <select>

Tom de Neef

Lasse Reichstein Nielsen

Tom de Neef

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads