CSS with Select elements

css select

[KeithBoynton]

Hi everyone,

I'm having an absolute nightmare trying to apply css styles to select elements.

After researching accross the internet I realise the support for this is fairly limited.

I'm using IE 6 and after checking at MSDN the background-color style appears to be valid yet....

I can't even get the background color to change, my css has the following entry:

select.recommendSelect {background-color:#cccccc}

and my html looks like this:

<select name="nlInterest" class=recommendSelect multiple size=3>
blah...
</select>

All other styles on other objects are working fine, can anyone shed any light on this?

[Alternative Future]

Hi KeithBoynton,

>>select.recommendSelect {background-color:#cccccc}
Should read:
select.recommendSelect {background:#cccccc}

HTH,

-George

[DrDoc]

>>select.recommendSelect {background-color:#cccccc}
Should read:
select.recommendSelect {background:#cccccc}

Actually, background-color works just fine.

KeithBoynton, I just tested the code you provided, and it works just like you would expect. Maybe there is something else causing the problem? Does your CSS validate? [jigsaw.w3.org] And, does your markup validate? [validator.w3.org]

[photon]

background-color

is a legitimate attribute, so that shouldn't be the problem.

You should have quotes around the class name though:

...class="recommendSelect"...

[Alternative Future]

>>Actually, background-color works just fine.

Stand corrected, sorry, when I first tested it I didnt have quotes around the class name within the tag. Then I put them around it and also changed the style so I thought it was the later that made the difference...

-George

[BillPosters]

select.recommendSelect {background-color:#cccccc}
Should read:
select.recommendSelect {background:#cccccc}

…

Also worth bearing in mind…

If an element already has some of its other background attributes styled by other css declarations, then it may be preferable to use the more specific background-color attribute to colour the element's background.

Using the general/shorthand background attribute will actually wipe any other background attributes that the element may be picking up from previous declarations.
Attributes not specifically mentioned in the shorthand declaration are wiped and reset to their default values, possibly erasing any existing custom background position, repeat, image and attachment values.

[KeithBoynton]

Gosh, putting quotes around the class name made all the difference.

Thanks so much for your help guys :)