Làm cách nào để xóa tất cả đường viền của hộp chọn?

Question

Làm cách nào để xóa tất cả đường viền của selectbox bằng cách sử dụng css hoặc Jquery?

Mã của tôi,

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

Khi tôi sử dụng mã này nó chỉ thay đổi vào mũi tên phong cách. Tôi cũng muốn xóa nền mũi tên. Tôi có thể xóa nó như thế nào?

kết quả hiện tại,

Kết quả mong đợi,

jsfiddle

Làm thế nào tôi có thể làm điều này?

Answer 1

Firefox có một số vấn đề với nền được chọn. Bạn có thể thử mã này - nó sẽ xóa mũi tên và sau đó bạn có thể thêm hình nền bằng mũi tên của mình (tôi đã lấy biểu tượng từ tìm kiếm của google, chỉ cần đặt biểu tượng của bạn)

Tôi nhận được điều này trên FireFox (Bạn có thể sử dụng bất kỳ biểu tượng mũi tên bạn muốn):

#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

bạn thay đổi css như thế này

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

và thêm tam giác sử dụng css cho #doctor_ch: sau

Answer 3

Thử

background-color: # 88AFF2; màu: #fff; margin-top: 15px; đường viền: 0px;