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

How to change color of <select>?

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


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

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

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

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