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

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>

Answer 2

试试吧

background-color：＃88AFF2; 颜色：#FFF; margin-top：15px; 边界：0像素;

Answer 3

你改变了这样的css

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

并使用css为#doctor_ch添加三角形：

之后