如何自定义选择标签？ [复制]答案

【问题标题】：How to Customise select tag? [duplicate]如何自定义选择标签？ [复制]
【发布时间】：2011-10-04 12:13:34
【问题描述】：

可能重复：
Is it possible to style a select box?

我想自定义我的选择标签，就像上面的图片一样，它应该在所有浏览器中看起来都一样。

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>

我想要上面的图片作为选择框的背景。

那么，你能帮忙吗？

【问题讨论】：

没有附加图片。还有，你自己试过什么？
图片最先附在顶部
您需要什么帮助？目前的问题质量很差-很难回答，因为您没有确定问题出在哪里。 tinyurl.com/so-hints
无法在此范围内自定义 select 元素。您将需要一个基于 JavaScript 的替代方案。
没有客户端脚本是不可能的。查看副本。

标签： html css image select

【解决方案1】：

纯CSS 和HTML 是不可能的。你需要的是 jQuery。

这里是一个很棒的list box 插件列表。这个one 看起来像你想要的，是我个人的最爱。

【讨论】：

【解决方案2】：

另一个你可能喜欢的 jQuery 插件是fnagel's selectmenu。这是this original 的演变。访问该页面，其中包含一些与您的示例完全相同的示例（除了颜色，但它是可主题化的）。

这些组件的一个（小）不便之处在于它们的圆角是基于 css3 的，并且不会在旧版 ie 中呈现

【讨论】：

【解决方案3】：

如果您使用 CSS3 的一些新功能，使用纯 CSS 和 HTML 并非不可能。

使用 css3-gradients 和border-radius，您可以设置选择元素的样式，使其看起来像您的示例。

但是，这在缺乏支持的浏览器中不起作用，但应该优雅地降级，即那些不支持的浏览器将显示标准的选择元素。

例子：

    <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>

【讨论】：