Thêm đường viền chrome trên <select> mục bằng góc tròn

Question

Tôi gặp sự cố trong Chrome khi có đường viền "hai" khi tôi sử dụng các góc tròn trên bảng chọn lọc (xem bên dưới, phía trên cùng là hộp nhập và phía dưới là lựa chọn hộp)

input, select { 
    border:2px solid #ced6e9; 
    -moz-border-radius:8px; 
    border-radius: 8px; 
} 

tôi đã thử hai cách tiếp cận khác, nhưng họ không làm việc:

1. Rounded corners in Chrome not working không làm việc và

2. thiết -webkit-appearance: none; nhưng này loại bỏ nút nhỏ cho thấy đó là một hộp chọn

Sửa Tôi đang sử dụng Windows 7 (Service Pack 1) với Chrome v18

Xem phần này jsFiddle example

Answer 1

Đã xảy ra sự cố này trước đây và tất cả những gì tôi đã làm là xóa đường viền trên lựa chọn và quấn nó trong một div có cùng kiểu (đường viền tròn). Tôi chắc chắn có một giải pháp thanh lịch hơn nhưng tốt hơn là tìm kiếm giờ/ngày cho giải pháp.

Kiểm tra số fiddle này.

Answer 2

đặt thuộc tính phác thảo css thành không cho thả xuống ...

select:focus 
{ 
    outline: none; 
} 

Answer 3

Bạn đang sử dụng phiên bản Windows nào? Đôi khi hệ điều hành sẽ buộc thêm các quirks đồ họa vào các phần tử HTML nhất định. Mọi thứ dường như hoạt động như mong muốn trong Chrome 18 trên Windows 7 với một chủ đề Aero được bật. Tôi thực sự đã trả lời một câu hỏi tương tự ngày hôm qua với ví dụ về tạo kiểu dáng select phần tử để thay thế các phần tử đồ họa bị mất với -webkit-appearance: none: https://stackoverflow.com/a/10074928/1030243. Hy vọng rằng, nếu không tìm thấy giải pháp nào khác, bạn có thể triển khai nó với một vài dòng CSS bổ sung.

Answer 4

tôi sẽ recomand sử dụng một đệm thay vì lợi nhuận ... nó sẽ trông đẹp hơn

select {   
    -moz-border-radius:8px; 
    border-radius: 8px; 
    -webkit-border-radius: 5px; /*this one is more important than the moz one*/ 
    padding:9px; 
}