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

Question

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

我的代码，

<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;
 }

当我使用这段代码时，它只改变了箭头样式。我想去掉箭头背景too.How我可以去掉吗？

当前结果，

预期结果，

jsfiddle

我该怎么做？

Answer 1

Firefox 在 select 背景方面存在一些问题。您可以尝试此代码 - 它会删除箭头，然后您可以添加带有箭头的背景图像（我从 google 搜索中获取了一个图标，只是用您的图标代替）

我在 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

你这样改css

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

并使用 css 添加三角形 #doctor_ch:after

Answer 3

试一试

背景色：#88AFF2；颜色：#fff；顶部边距：15px； border:0px;

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

How to remove all the borders of a selectbox?

html

css

jquery

drop-down-menu