How to Customise select tag? [duplicate]_问答_开发者

How to Customise select tag? [duplicate]

开发者 https://www.devze.com 2023-03-20 12:42 出处：网络

This question already has answers here: Closed 11 years ago. Possible Duplicate: Is it possible to style a select box?

相关专题：css select

This question already has answers here: Closed 11 years ago.

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

How to Customise select tag? [duplicate]

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 开发者_如何学Goimage as a background of a select box.

So, can you please help ?

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.

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

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>