Cách tạo mũi tên thả xuống từ Bootstrap của Twitter?

Question

Tôi đã kiểm tra/sử dụng Twitter Bootstrap trong một thời gian ngắn. Tôi thích những gì họ đã làm, nhưng hơn thế, tôi thích hiểu những gì tôi làm.

Sau khi kiểm tra mũi tên thả xuống với trình kiểm tra của Chrome, có vẻ như thực tế là thực thể html ↓. Tôi đã cố gắng tái tạo điều này nhưng không thành công. Tôi nhận được một mũi tên xấu xí chứ không phải hình tam giác đơn giản.

Thuộc tính CSS tối thiểu để sử dụng để tạo lại nó là gì?

PS: Liên kết đến một số jsFiddle cố gắng tái tạo.

Answer 1

Đây là working example.

Bạn không cần thêm ↓ trong HTML của mình và border-color là white, làm cho hình ảnh ẩn trên nền trắng thành mắt người.

Answer 2

Đầu tiên tránh kiểu trình duyệt mặc định. Sau đó sử dụng của riêng bạn. Ví dụ:

select{ 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 

    height: 60px; 
    border: 1px solid #ccc; 
    padding: 0 0 0 20px; 
    font-size: 18px; 
    font-weight: 300; 
    border-radius: 0; 
    color: #999; 
    letter-spacing: 1px; 
    background: url("../img/arrow@2x.png") calc(100% - 10px) 24px #fff no-repeat; 
    cursor: pointer; 
}