By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,415 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

applying style to <select>

P: n/a
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
Share this Question
Share on Google+
5 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.