applying style to <select>

[Isha]

Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="background:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selected"
style="background:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha

[okaroleo]

Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:

Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="background:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selected"
style="background:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha

[okaroleo]

I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxSelectUpdate(this);" ID="Select1">
<option value="1" style="background:yellow" >1</option>
<option value="2" style="background:brown" >2</option>
<option value="3" style="background:red" >3</option>
</select>
<script lang=javascript>
function ffoxSelectUpdate(elmt)
{
if(!document.all) elmt.style.cssText =
elmt.options[elmt.selectedIndex].style.cssText;
}
</script>

ok******@gmail.com wrote:

Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:

Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="background:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selected"
style="background:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha

[Isha]

Hi
Thanks. This code is working with IE 6, but not firefox.
How this issue can be resolved for the firefox??
Isha.

ok******@gmail.com wrote:

I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxSelectUpdate(this);" ID="Select1">
<option value="1" style="background:yellow" >1</option>
<option value="2" style="background:brown" >2</option>
<option value="3" style="background:red" >3</option>
</select>
<script lang=javascript>
function ffoxSelectUpdate(elmt)
{
if(!document.all) elmt.style.cssText =
elmt.options[elmt.selectedIndex].style.cssText;
}
</script>

ok******@gmail.com wrote:

Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:

Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="background:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selected"
style="background:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha

[Isha]

Hi
Thanks. This code is working with IE 6, but not firefox.
How this issue can be resolved for the firefox??
Isha.

ok******@gmail.com wrote:

I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxSelectUpdate(this);" ID="Select1">
<option value="1" style="background:yellow" >1</option>
<option value="2" style="background:brown" >2</option>
<option value="3" style="background:red" >3</option>
</select>
<script lang=javascript>
function ffoxSelectUpdate(elmt)
{
if(!document.all) elmt.style.cssText =
elmt.options[elmt.selectedIndex].style.cssText;
}
</script>

ok******@gmail.com wrote:

Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:

Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="background:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selected"
style="background:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha

[Isha]

Hi
Thanks. This code is working with IE 6, but not firefox.
How this issue can be resolved for the firefox??
Isha.

ok******@gmail.com wrote:

I wrote this little Javascript snippet for you, only for ffox as IE
does not need it:
Make a note of onChange event in select tag.

<select name="alltags" class="select"
onchange="ffoxSelectUpdate(this);" ID="Select1">
<option value="1" style="background:yellow" >1</option>
<option value="2" style="background:brown" >2</option>
<option value="3" style="background:red" >3</option>
</select>
<script lang=javascript>
function ffoxSelectUpdate(elmt)
{
if(!document.all) elmt.style.cssText =
elmt.options[elmt.selectedIndex].style.cssText;
}
</script>

ok******@gmail.com wrote:

Isha, your expectation is corerct for IE 6. Not sure about 5.5 or
earlier. Also it won't work for Firefox unfortunatelly. Not even if
all elements are the same color. Firefox will set each element to
different color but when you select it the drop down will not change
it's color. Only setting style in <select> tag will change it in ffox.
It should be possible to mimic this behavior using Javascript but i
dont' have the code on hand.

Cheers!
Isha wrote:

Hi all,

I wanted to change the background color for only the first option in a
select box, but following changed the background color for the whole
dropdown box.

<select name="alltags" class="select" style="background:yellow">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

then i did this to change the background color for only the first
option

<select name="alltags" class="select">
<option value="1" selected="selected"
style="background:yellow">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

this too is not working. when drop down box is being displayed, the
color is not changed and instead when i drop it, the color for the
first option is changed.
how can i change backgroundcolor for the first option that's effective
when box is displayed?
plz help
Isha