选择框下拉样式 [英] Selectbox dropdown styling

问题描述

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

这怎么可能?我已尝试使用一些 css 内容向下拉区域添加叠加层，但无法正常工作.

选择框代码:

#sidebar select{背景:透明；宽度:148px；高度:31px；边界:0;边框半径:3px；行高:1；-webkit 外观:无；大纲:无；颜色:银色；填充:0px 0px 0px 10px;字体样式:斜体；光标:指针；}.styled-select{宽度:150px；高度:30px；溢出:隐藏；背景: url('../images/icons/selectbox.png') 没有重复的权利；边界:0;}<div class="styled-select"><选择类=选择框"><option value="">Hollaws</option><option value="">Hollaws</option><option value="">Hollaws</option></选择>

这里提供了一个小小提琴示例

解决方案

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

演示

演示 2 (更好看的演示)

.styled-select{宽度:150px；高度:30px；溢出:隐藏；背景: url('http://www.simonsweb.dk/selectbox.png') 无重复权利；边界:0;}.styled-select 选择 {宽度:180px；背景:透明；边框:0；高度:30px；边距顶部:5px；}

I am working on a project where i need to style a selectbox. I can easy style the selectbox to match the psd, but when it comes to the dropdown area, its driving me nuts.

How is that possible? I have tryed with adding a overlay to the dropdown area with som css stuff, but i can't get it to work well.

The code for 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

解决方案

The trick is to use background-color: transparent; and border: 0; for select element, and also make sure your select element is larger than the container element.

Demo

Demo 2 (Little better looking demo)

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

这篇关于选择框下拉样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！