Question

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

Select Tag

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

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>

我想将上面的图像作为选择框的背景。

那么，你能帮忙吗？

Answer 1

使用纯CSS和HTML，您在这里尝试的是不可能的。你需要的是jQuery。

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

Answer 2

您可能喜欢的另一个jQuery插件，具有与JQueryui的themeroller相关的额外优势是fnagel's selectmenu。这是this original的演变。访问该页面，其中包含一些看起来与您的样本完全相同的示例（除了颜色，但它是可主题的）。

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

Answer 3

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

使用css3-gradient和border-radius，您可以将select-element设置为与您的示例相似。

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

示例：

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

如何自定义选择标签？

3 个答案: