如何删除选择框的所有边框？

Question

我如何删除的所有边界selectbox使用css或Jquery？

我的代码,

<select id="doctor_ch">
   <option value="1" selected>One</option>
   <option value="2">Two</option>
</select>

CSS

  #doctor_ch{
    background-color: #88AFF2; 
    color:#fff; 
    margin-top: 15px;
 }

当我使用此代码时,它只会更改箭头样式.我也想删除箭头背景.如何删除它？

目前的结果,

预期结果,

的jsfiddle

我怎样才能做到这一点 ？

Answer 1

Firefox在select-background方面存在一些问题.您可以尝试使用此代码 - 它将删除箭头,然后您可以使用箭头添加背景图像(我从谷歌搜索中获取了一个图标,只需将图标改为图标)

我在FireFox上得到了这个(你可以使用你想要的任何箭头图标):

#doctor_ch{
    background: url('http://s4.postimg.org/5yxladijd/icon_sort_down.gif') no-repeat right #88AFF2;
    color:#fff; 
    padding-right:15px;
    margin-top: 15px;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
 }

<select id="doctor_ch">
    <option value="1" selected>One</option>
    <option value="2">Two</option>
</select>