css - 如何使用CSS更改选择框中箭头的样式

Question

在使用漂亮的箭头图像设计选择框样式时，我能得到一些帮助吗？我尝试了几种组合，但无法在显示 .png 时隐藏默认箭头。

这是我需要帮助的:

这是 CSS:

ul > li.sel_con
{
    float:none;
    list-style:none;
    width:215px;
    border:1px solid #cfcfcf;
    height:auto;
    border-radius:5px;
    background-color:#FFF;
     -moz-box-shadow:    inset 0 0 5px #CCC;
   -webkit-box-shadow: inset 0 0 5px #CCC;
   box-shadow:         inset 0 0 5px #CCC;
   padding:6px 0 6px 02px;
    position:relative;
    z-index:0;
    behavior: url(pie/PIE.htc);

}

ul > li > select
{
    width:207px;
    border:none;
    background-color:transparent;
    outline:none;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;


}

这是当前 CSS 和 HTML 的 fiddle ，任何建议将不胜感激:

http://jsfiddle.net/pazzesco/c0qgggab/1/

Answer 1

ul > li > select
{
    width:207px;
    border:none;
    background-color:transparent;
    outline:none;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;
    -webkit-appearance: none;
    -moz-appearance:none; 
}

更改这些代码，您将实现它。 Here is a JSFiddle.