Question

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

怎么可能？我尝试过使用som css的东西在下拉区域添加叠加层，但我无法让它运行良好。

selectbox的代码：

#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

Answer 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;
}

Answer 2

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

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

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

Selectbox下拉样式

2 个答案: