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

问题描述

我正在开发一个项目，我需要设计一个选择框。
我可以轻松地调整selectbox来匹配psd，但是当涉及到下拉区域时，它会让我疯狂。

这可能怎么样？我已经尝试用som css增加一个叠加到下拉区域，但我无法让它工作。

选择框的代码：

  #sidebar select {
 background：transparent; 
 width：148px; 
 height：31px; 
 border：0; 
 border-radius：3px; 
 line-height：1; 
 -webkit-appearance：none; 
概述：无; 
颜色：银色; 
 padding：0px 0px 0px 10px; 
 font-style：italic; 
光标：指针; 
} 
 
 .styled-select {
 width：150px; 
 height：30px; 
 overflow：hidden; 
 background：url（'../ images / icons / selectbox.png'）no-repeat right; 
 border：0; 
} 
 
< div class =style-select> 
< select class =selectbox> 
< option value => Hollaws< / option> 
< option value => Hollaws< / option> 
< option value => Hollaws< / option> 
< / select> 
< / div> 
  

这里提供了一个小小提琴

解决方案

诀窍是使用背景-color：transparent; 和 border：0; 为选择元素，确定你的 select 元素大于容器元素。

演示

演示2

  .styled-select {
 width：150px; 
 height：30px; 
 overflow：hidden; 
 background：url（'http://www.simonsweb.dk/selectbox.png'）不可重复的权利; 
 border：0; 
} 
 
 .styled-select select {
 width：180px; 
背景：透明; 
 border：0; 
 height：30px; 
 margin-top：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屋！