选择框下拉样式[重复]答案

【问题标题】：Selectbox dropdown styling [duplicate]选择框下拉样式[重复]
【发布时间】：2014-02-05 05:57:47
【问题描述】：

我正在开发一个需要设置选择框样式的项目。我可以轻松地设置选择框的样式以匹配 psd，但是当涉及到下拉区域时，它让我发疯了。

这怎么可能？我尝试使用 som css 内容向下拉区域添加叠加层，但我无法使其正常工作。

选择框代码：

#sidebar select{
        background: transparent;
        width:148px;
        height:31px;
        border:0;
        border-radius:3px;
        line-height:1;
        -webkit-appearance: none;
        outline:none;
        color:silver;
        padding: 0px 0px 0px 10px;
        font-style: italic;
        cursor: pointer;
    }

    .styled-select{
        width: 150px;
        height: 30px;
        overflow: hidden;
        background: url('../images/icons/selectbox.png') no-repeat right; 
        border:0;
    }

<div class="styled-select">
   <select class="selectbox">
   <option value="">Hollaws</option>
   <option value="">Hollaws</option>
   <option value="">Hollaws</option>
   </select>
</div>

A small fiddle for example is provided here

【问题讨论】：

如果不抓狂，就无法为下拉区域设置样式：stackoverflow.com/questions/16152144/change-combo-box-style
你想得到什么？向我们展示你的 psd

标签： html css select area

【解决方案1】：

诀窍是使用background-color: transparent; 和border: 0; 作为select 元素，并确保您的select 元素大于容器元素。

Demo

Demo 2 （更好看的演示）

.styled-select{
    width: 150px;
    height: 30px;
    overflow: hidden;
    background: url('http://www.simonsweb.dk/selectbox.png') no-repeat right; 
    border:0;
}

.styled-select select {
    width: 180px;
    background: transparent;
    border: 0;
    height: 30px;
    margin-top: 5px;
}

【讨论】：

我不认为你明白了，也许我没有仔细解释它。我需要为下拉区域设置样式，您提供的小提琴不起作用:)：/
@SimonDuun 那么我刚刚在小提琴中做了什么？
根据您的询问，外星先生的解决方案是完美的+1
@SimonDuun 以防万一，如果您打算更改下拉框，那么仅使用纯 CSS 是不可能的，此外，如果您认为删除的选项与主要选项相去甚远，那就摆脱来自.styled-select select 的height 属性

【解决方案2】：

感谢您提出的所有很酷的建议。我实际上最终使用了一个可以跨浏览器工作的 FansySelectBox 插件。

http://code.octopuscreative.com/fancyselect/

编辑：在这种情况下，我不知道在这种情况下回答我自己的问题是否可以接受？

【讨论】：