How to Customise select tag?

Question

Possible Duplicate:
Is it possible to style a select box?

Select Tag

I want to customise my select tag as like the image above which should looks equally in all browsers.

CSS:

.select-bg
{
  background:url(../images/select-bg.png) no-repeat top center;
width:350px;
height:47px;
}

.select-bg select
{
background:#ff0000;
}

<div class="select-bg">

<select>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>

</select>

</div>

I want the the above image as a background of a select box.

So, can you please help ?

There is no image attached. Also, what have you tried by yourself? — Jason Gennaro, Jul 13 '11 at 13:24
What do you need help with? The question as it stands is very poor in quality - it is difficult to answer as you didn't identify where you are having problems. http://tinyurl.com/so-hints — Oded, Jul 13 '11 at 13:29
Customizing a `select` element to this extent is not possible. You will need a JavaScript based alternative. — Pekka, Jul 13 '11 at 13:33
It's not possible without client side scripting. See the duplicate. — Shadow The GPT Wizard, Jul 13 '11 at 13:35

score 1 · Accepted Answer · answered Jul 13 '11 at 13:35

1

What you a are attempting here is impossible with pure CSS and HTML. What you are going to need is jQuery.

Here is a list of great list box plugins. This one looks like the one you would like and is my personal favorite.

answered Jul 13 '11 at 13:35

Phil

10,948
17
69
101

fvu · Answer 2 · 2011-07-13T13:55:29.593

Another jQuery plugin you may like, that has the extra advantage of being themable with JQueryui's themeroller is fnagel's selectmenu. It's the evolution of this original. Visit that page with some example that look exactly like your sample (except for the color but it's themeable).

A (minor) inconvenience of those components is that their rounded corners are css3 based and won't be rendered in older ie's

score 0 · Answer 3 · answered Jul 13 '11 at 14:01

Its not impossible with plain CSS and HTML if you use some of the new fetures of CSS3.

With css3-gradients and border-radius you can style the select-element to look like your example.

However, this will not work in browsers that lack support, but should degrade gracefully i.e those browsers that do not support this will show a standard select-element.

Example:

    <style type="text/css">
        .wrapper select { 
            background-image: -webkit-gradient(
                  linear,
                  left bottom,
                  left top,
                  color-stop(0.42, #EA0B0B),
                  color-stop(1, #F8ADAD));

            background-image: -moz-linear-gradient(
                center bottom,
                #EA0B0B 42%,
                #F8ADAD 100%); 
            border-radius:10px; 
            border:1px solid #000; 
            outline:0; 
            padding:5px; 
            color:#FFF; 
            font-weight:bold; 
        }
        .wrapper select > option { background-color:#EA0B0B; }
    </style>
</head>
<body>
    <div class="wrapper">
        <select class="test">
            <option>first</option>
            <option>Second</option>
            <option>Third</option>
        </select>
    </div>

How to Customise select tag?

3 Answers3