469,270 Members | 1,074 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,270 developers. It's quick & easy.

applying style to <select>

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

Jun 27 '06 #1
5 8559
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


Jun 27 '06 #2
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


Jun 27 '06 #3
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


Jun 28 '06 #4
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


Jun 28 '06 #5
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


Jun 28 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Ang Talunin | last post: by
1 post views Thread by Matthias Wege | last post: by
5 posts views Thread by Brian Foley | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.