Need Help With Using Css - to format a SELECT list

Avalon

Jan 12 2006, 02:06 PM

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.
user posted image

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.

CODE

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

Lozbo

Jan 15 2006, 12:11 AM

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

Avalon

Jan 15 2006, 01:16 AM

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.

Tyssen

Jan 15 2006, 04:47 AM

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

Jan 15 2006, 05:17 AM

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.

user posted image

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

Feb 3 2006, 08:14 PM

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

Lozbo

Feb 9 2006, 02:29 AM

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:

CODE

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

Feb 9 2006, 10:13 PM

QUOTE(Lozbo @ Feb 9 2006, 12:29 PM)

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

Feb 10 2006, 10:56 AM

QUOTE(Tyssen @ Feb 10 2006, 09:13 AM)

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.

Tyssen

Feb 10 2006, 01:16 PM

QUOTE(Avalon @ Feb 10 2006, 08:56 PM)

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.

Latest Entries

iGuest

May 3 2008, 09:57 AM

Replying to Avalon
Hi, 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.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE