I thought I had Cascading Style Sheets (CSS) pretty much under control, but this has me stumped. What I want to do is format a SELECT drop-down list with a drop shadow as a background image, similar to what I have done with the textarea shown below. As you can see, I can't it get to work on the drop-down box.

I can change the font color, font type, width and background color but I can't seem to use a background image like I can for an INPUT box.

I have tried various things without success, can someone please show me a working example of where they have managed to put an image in the background of a SELECT list? I'm getting very frustrated by it.

I had a similar problem trying to put a drop shadow image on a TEXTAREA, but I managed to overcome that one by using a discreet style tag in the textarea tag like this. I tried, but that doesn't work on the SELECT list either.

Greetings Avalon, I'm not sure if that is possible, i have never seen a css background set for a select list...

But if you could post the link to the site itself that you are developping it would be nice (and if you have seen something like the shadow you are trying to achieve around, post a link too).

I have a link to a site that has a lot of examples of how to achieve a full css formatted forms, with a tableless layout, I mean, pure (x)html divs and spans:

http://jeffhowden.com/code/css/forms/

Also, if someone is interested I have a link to a site which shows lots of ways of displaying tabular data with different kinds of CSS designs, I know it does not have to do a lot with this thread but I thought it might be helpful too:

http://icant.co.uk/csstablegallery/index.php?css=35

My site is http://www.mudmall.com and it's on the Custom Search page that I want to format the select box. The site still uses a lot of tables, I haven't got my head around a pure CSS site yet, I will in time.

The other problem I had was trying to use a change of opacity effect on a mouseover that would work in both Firefox and IE. I managed to find the answer to that problem thanks to jlhaslip via this link http://www.mandarindesign.com/opacity.html You can see the effect on the any of the thumbnails in my site.

I have searched high and low for an answer to my problem with select lists, but I don't think it is possible. Thanks for trying.

Form elements are very hard to style across browsers. In fact, this article suggests you can't achieve cross-browser compatability.
But aside from that, are you applying your background image to the select or option element?

I am trying to apply a background image to a <select> element... i.e. a drop-down list of values, not a file select control. Something similar to the one shown below, (the post color selection list from the shoutbox here) as you can see, font colors can be changed, as can font face, size and background color, but I can't put a background image in it.



The link you provided does not seem to cover background images which do work in <input> boxes and <textarea> boxes which I have shown in my original post.

is there a css code to change the background of that select or of its scroller?

Nice article Tyssen, some one took a lot of time to test this... I come to the conclusion that you dont HAVE to format it exactly the same for everybrowser, It would take too much time to fix little differences and if in the end is still usable, why should we worry that much?

adly300 There is a css code to change it, it would be like this:



And for good browsers you can add a :hover pseudoattribute to the rule, and even a :focus...

Exactly - the only people who are gonna look at your site in multiple browsers are web designers/developers.

Even so, I would still like my site to look pretty much the same no matter which browser is used. Because of this I will try to avoid using formatting that is only applicable to one browser.

This post has been edited by Avalon: Feb 10 2006, 10:56 AM