CSS & <OPTION // "Class" Related Question

R

rebeccatre

please help me with this,

<style>
#a, option.message {background-color: green; color: white;}
#b, option.message {background-color: yellow; color: black;}
</style>

<select id="thisselect">
<option id="thisone" class="message">THANK YOU</option>
</select>

please help me change the select option to the B style css above, also
if my syntax could be better elsewhere
 
T

Thomas 'PointedEars' Lahn

<style>
Click to expand...

<style type="text/css">

I hope you have it within the `head' element.
#a, option.message {background-color: green; color: white;}
#b, option.message {background-color: yellow; color: black;}
Click to expand...

There is little point in this stylesheet, as the second declaration for the
selector `option.message' supersedes the first one. It is semantically
identical to

#a {background-color: green; color: white;}
#b, option.message {background-color: yellow; color: black;}

But you appear to have no elements with ID `a' or `b' in your markup, so
the first selector does not match, and the second will match only for
`option.message'.
</style>

<select id="thisselect">
<option id="thisone" class="message">THANK YOU</option>
</select>

please help me change the select option to the B style css above,
Click to expand...

Sorry, I really don't understand what you mean. If I would have to make
an educated guess, I would assume that you have been testing with Internet
Explorer or another UA that does not support styling form controls the way
you want it.
also if my syntax could be better elsewhere
Click to expand...

It would have been better posted to
comp.infosystems.www.authoring.stylesheets, as plain CSS questions are
off-topic here.


PointedEars
 
R

rebeccatre

<style type="text/css">

I hope you have it within the `head' element.


There is little point in this stylesheet, as the second declaration for the
selector `option.message' supersedes the first one. It is semantically
identical to

#a {background-color: green; color: white;}
#b, option.message {background-color: yellow; color: black;}

But you appear to have no elements with ID `a' or `b' in your markup, so
the first selector does not match, and the second will match only for
`option.message'.




Sorry, I really don't understand what you mean. If I would have to make
an educated guess, I would assume that you have been testing with Internet
Explorer or another UA that does not support styling form controls the way
you want it.
Click to expand...


Sure, can you respectfully run that script I provided? IE
implemention is just fine :)


like, build 2 functions


stylesheets 1 (WHTIE)
stylesheets 2 (PURPLE)

function testbed18(){
change to stylesheets 1 attributes for a select option
}

function testbed21(){
change to stylesheets 2 attributes for a select option
}



i hope is this explains better, as long as it functions i will be a
happy camper :) thank you so much for any help in advance.
 
B

Bart Van der Donck

[email protected] said:
<style>
#a, option.message {background-color: green; color: white;}
#b, option.message {background-color: yellow; color: black;}
</style>

<select id="thisselect">
<option id="thisone" class="message">THANK YOU</option>
</select>

please help me change the select option to the B style css above
Click to expand...

<html>
<head>
<style>
.re { background-color: red }
.gr { background-color: green }
</style>
</head>
<body>
<form>
<select id="thisselect" size="1">
<option id="thisone" class="re">1</option>
<option id="second" class="re">2</option>
</select>
<input type="button" value="Make green"
onClick="document.getElementById('thisone').className = 'gr'">
</form>
</body>
</html>

Note that Firefox only displays the style of the options in the
dropdown part of the select-box.

Hope this helps,
 
T

Thomas 'PointedEars' Lahn

Sure, can you respectfully run that script I provided?
Click to expand...

You have posted no script at all. You have posted what looked like a
cascading stylesheet and maybe tag-soup HTML.
IE implemention is just fine :)
Click to expand...

If you mean your stylesheet works as described in IE 4+/Win, that is
probably correct. However, the redundancy in the first rule, and the
fact that some controls cannot be fully styled in MSHTML, remains.
like, build 2 functions


stylesheets 1 (WHTIE)
stylesheets 2 (PURPLE)

function testbed18(){
change to stylesheets 1 attributes for a select option
}

function testbed21(){
change to stylesheets 2 attributes for a select option
}
Click to expand...

And now?
i hope is this explains better,
Click to expand...

Hardly. It would appear that you have to understand CSS first (what it is,
how it works), which is beyond the scope of this newsgroup. Try to
understand what I wrote about it, then try the newsgroup I mentioned before.


PointedEars
 
B

Bart Van der Donck

Randy said:
Bart Van der Donck said the following on 8/23/2007 10:44 AM:


And that IE7 only changes what isn't in the dropdown part of the
select box. Odd behavior to say the least.
Click to expand...

I think it's a bug, because MSIE seems to show it fine when setting/
altering these rules directly:

<html>
<body>
<form>
<select id="thisselect" size="1">
<option id="thisone" style="color:red">1</option>
<option id="second" style="color:red">2</option>
</select>
<input type="button" value="make green"
onClick="document.getElementById('thisone').style.color='green'">
</form>
</body>
</html>

Accessing the element as

document.forms[0].elements['thisselect'].options[0]
document.getElementsByTagName('option')[0]
...

in stead of

document.getElementById('thisone')

causes no difference here in both cases.

Setting <select size="X"> to more than 1 seems to work correctly both
under FF & IE.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Trouble with css 4
Working on mobile css menu with plenty of frustration! 2
Positioning CSS components 1
action_page.php form 2
Need help , Having problem with Drag n Drop ? 9
Please Help? 0
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Using CSS ID Tags to 2

Members online

No members online now.
Total: 28 (members: 0, guests: 28)
Robots: 491

Forum statistics

Threads
473,769
Messages
2,569,581
Members
45,056
Latest member
GlycogenSupporthealth

Latest Threads

Top