如何使用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的小提琴，任何建议都将受到赞赏：

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.

Answer 2

好的，最后这就是我所做的，在IE，Mozilla和Chrome以及Android中测试和运行。

仅提供更改的代码：

ul > li > select
{
    width:110%;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right ;
    background-position: 87%;
}

以及

ul > li.sel_con
{
overflow:hidden;
}