[Solved] Custom Select and transparency

[Yuko]

Hello!

I’m new to the forum but I’ve been reading the blog for a while now.

I would like your help on a little CSS probleme I haven’t been able to solve for a while now.
I have to style a select with an image, that’s working well. But The dropdown part is dark grey, the color of my background actually. I’m quite sure it’s because of the transparency property but I have to use it to ba able to have an image, if i’m correct.

Here is a sample of the css applied to the box:

Code:

#search_form_right select{
background: transparent url(“/images/form.gif”) no-repeat;
border:solid 0 #fff;
…
}

And here is a live example.

How can I manage to have a white background on the dropdown?

Thanks a lot for your help!

[Dominic]

Try this instead.

Code:

background:#F3F3F4 url(/images/form.gif) no-repeat;

You could also write it long hand like this:

Code:

background-color: #F3F3F4; /* or white, whatever you want here */
background-image: url(/images/form.gif);
background-repeat: no-repeat;

The default color where the "#F3F3F4" is written in the first example, is transparent. So if your background gif has transparent areas, the inherited background colour will show through.

EDIT.
Sorry, I’m really tired.
To answer your original question, you can use background colour in combination with background images. Hope I’ve answered your question properly.

[Yuko]

Hello!

Thanks for your answer.
I’ve actualy already tried that but it does not work properly on firefox it seems.
Here’s what I see then :
[img]http://marionbouguet.com/bed-style/web/images/Image1.png[/img]

[img]http://marionbouguet.com/bed-style/web/images/Image2.png[/img]

So it works > the dropdown has a white background.
But the image is just applied on the top first pixel… Even if there is a 20px height property applied.

Do you think I did something wrong somewhere ?

[Dominic]

For some reason adding this:

Code:

padding:1px 0;

seems to fix it — in firefox at least, not sure about other browsers.

I really have no idea why this is working.

Does anyone else on this forum understand the intricacies of styling selects?

[Yuko]

Ooooh! Thanks a looot!

It works great! On firefox at least! I wouldn’t have though of that.

Thank you so much!

[Author]

Posts