472,119 Members | 2,053 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,119 software developers and data experts.

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 8648
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
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.