Need Help With Using Css to format a SELECT list

[Avalon 1]

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.

<textarea cols=36 rows=3 name="alt_text" style="width: auto; height: auto; border-style: inset; border-width: 1px; background-color: #FFFFFF; font-size: 10pt; background-image: url('img/drop_shadow.gif'); padding-left: 4px; color: #000000; font-family: Verdana,Arial,'Trebuchet MS'"></textarea>

I tried, but that doesn't work on the SELECT list either.

[Lozbo 0]

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/tables/35.php

[Avalon 1]

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://forums.xisto.com/no_longer_exists/ 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.

[Tyssen 0]

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?

[Avalon 1]

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.

[adly3000 0]

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

[Lozbo 0]

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:

select {background: white url(select-bg.gif) top left no-repeat;}

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

[Tyssen 0]

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?

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

[Avalon 1]

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. Edited February 10, 2006 by Avalon (see edit history)

[Tyssen 0]

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.

I'm not saying you shouldn't and I go to great lengths to get everything to look as similar as possible across browsers, but at the end of the day, if you're banging your head against a wall over just the tiniest details, then maybe you gotta step back and ask yourself how much it's worth to be exactly the same.

[Lozbo 0]

Hehe I agree with both of you. I dont think its valid (Im talking about me here) to sit back and not care for details, but when you it gets overwhelming amounts of time and just cant get it done... I think its pointless to go further, considering that you've already learnt a lot trying to achieve that...Anyway, I dont think I have came to a site or a tutorial that can help you additionally to what has already been said here, but if I do, I'll post it here (I'm working with a couple of sites that require a form, so Im taking a close look to this cross browser xhtml forms-formatting stuff)...Good day (at least in my world =P )

[iGuest 3]

Replying to AvalonHi, I am looking to do exactly this on my own site. http://www.partfinder.ie/. But without much success to date I'm afraid, so I've had to use normal select box. I'd really appreciate some tips on this.Regards, Rev.

[iGuest 3]

To apply css on select tag

Need Help With Using Css

 

Hello all

 

I want to know that how could I apply the css on select tag. The problem is that I have a list of option of different sizes. I fixes the size of the select tag, now I m facing the problem in IE that I does not display the full text but mozilaa shows the full text. So what I do for this. Please help me