468,554 Members | 1,034 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

How to change color of <select>?

Hello all,

I need to change the colour of my text. For the paragraph I do
document.fgColor ="blue" ;
but how do I do this for the select tags?
....and I prefer it to apply to all select tags
Tia.
Sep 27 '08 #1
4 5855
SAM
Le 9/27/08 2:24 AM, html a écrit :
Hello all,

I need to change the colour of my text. For the paragraph I do
document.fgColor ="blue" ;
prefer
JS :
document.getElementById('P_1').style.background = 'skyblue';
HTML :
<p id="P_1"blah </p>

but how do I do this for the select tags?
<select style="background: orange">
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
...and I prefer it to apply to all select tags
<style type="text/css">
select { background: yellow; border: 2px solid orange; }
option { background: #ffc }
p { background: #ddd; }
#P_1 { background: azure; color: blue; text-align: justify }
</style>
<p>
<select>
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
</p>
<p id="P_1"re blah </p>

<http://www.w3.org/TR/CSS21/indexlist.html>

--
sm
Sep 27 '08 #2
Hello all,

I need to change the colour of my text. For the paragraph I do
document.fgColor ="blue" ;

prefer
JS :
document.getElementById('P_1').style.background = 'skyblue';
HTML :
<p id="P_1"blah </p>

but how do I do this for the select tags?

<select style="background: orange">
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
...and I prefer it to apply to all select tags

<style type="text/css">
select { background: yellow; border: 2px solid orange; }
option { background: #ffc }
p { background: #ddd; }
#P_1 { background: azure; color: blue; text-align: justify }
</style>
<p>
<select>
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
</p>
<p id="P_1"re blah </p>

<http://www.w3.org/TR/CSS21/indexlist.html>
Thank you, what I need is a little different.

First of all, it is interesting that document.fgcolor propagates into
paragraphs but not into select elements, any idea why?

Second, I want to be able to change the colour of the select
tags as a response to a click on a button, so how do I assign
to all select tags a colour in script (as opposed to in style sheet/tag)?
Tia
Sep 27 '08 #3
html wrote:
>>Hello all,

I need to change the colour of my text. For the paragraph I do
document.fgColor ="blue" ;
prefer
JS :
document.getElementById('P_1').style.background = 'skyblue';
HTML :
<p id="P_1"blah </p>

>>but how do I do this for the select tags?
<select style="background: orange">
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
>>...and I prefer it to apply to all select tags
<style type="text/css">
select { background: yellow; border: 2px solid orange; }
option { background: #ffc }
p { background: #ddd; }
#P_1 { background: azure; color: blue; text-align: justify }
</style>
<p>
<select>
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
</p>
<p id="P_1"re blah </p>

<http://www.w3.org/TR/CSS21/indexlist.html>

Thank you, what I need is a little different.

First of all, it is interesting that document.fgcolor propagates into
paragraphs but not into select elements, any idea why?
It does not do that.

It only looks like it does that. Default background color is transparent.
Second, I want to be able to change the colour of the select
tags as a response to a click on a button, so how do I assign
to all select tags a colour in script (as opposed to in style sheet/tag)?
Change a class selector in an element above them. For example, add a
class "detonate" to body.

<style type="text/css">
..detonated select {
background: chartreuse;
}
</style>

using:

<button onclick="document.body.className='detonated'">deto nate</button>
Garrett
Tia

Sep 27 '08 #4
html wrote:
>>Hello all,

I need to change the colour of my text. For the paragraph I do
document.fgColor ="blue" ;
prefer
JS :
document.getElementById('P_1').style.background = 'skyblue';
HTML :
<p id="P_1"blah </p>

>>but how do I do this for the select tags?
<select style="background: orange">
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
>>...and I prefer it to apply to all select tags
<style type="text/css">
select { background: yellow; border: 2px solid orange; }
option { background: #ffc }
p { background: #ddd; }
#P_1 { background: azure; color: blue; text-align: justify }
</style>
<p>
<select>
<option>100
<option>200
<option style="background: yellow">300
<option>400
</select>
</p>
<p id="P_1"re blah </p>

<http://www.w3.org/TR/CSS21/indexlist.html>

Thank you, what I need is a little different.

First of all, it is interesting that document.fgcolor propagates into
paragraphs but not into select elements, any idea why?
It does not do that.

It only looks like it does that. Default background color is transparent.
Second, I want to be able to change the colour of the select
tags as a response to a click on a button, so how do I assign
to all select tags a colour in script (as opposed to in style sheet/tag)?
Change a class selector in an element above them. For example, add a
class "detonate" to body.

<style type="text/css">
..detonated select {
background: chartreuse;
}
</style>

using:

<button onclick="document.body.className='detonated'">deto nate</button>
Garrett
Tia

Sep 27 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Ang Talunin | last post: by
5 posts views Thread by Brian Foley | last post: by
6 posts views Thread by Chris Fink | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.