Twitter의 부트 스트랩에서 드롭 다운 화살표를 만드는 방법은 무엇입니까?

Question

나는 꽤 오랫동안 트위터 부트 스트랩을 확인/사용 해왔다. 나는 그들이 한 일을 좋아하지만 그 이상으로 나는 내가하는 일을 이해하는 것을 좋아합니다.

크롬의 검사기로 드롭 다운 화살표를 검사 한 후 실제로는 ↓ html 엔티티 인 것으로 보입니다. 나는 이것을 재현하려고 노력했지만 성공하지 못했습니다. 나는 단순한 삼각형이 아닌 못생긴 화살을 얻고 있습니다.

재현하기 위해 사용할 최소 CSS 속성은 무엇입니까?

추 신 : 그것을 재생하려고 시도한 jsFiddle에 대한 링크입니다.

Answer 1

여기는 working example입니다.

HTML에 ↓을 추가로 필요로하지 않으며 border-color은 white 이었으므로 흰색 배경에서는 보이지 않게 만들 수 있습니다.

Answer 2

먼저 기본 브라우저 스타일을 피하십시오. 그런 다음 자신의 것을 사용하십시오. 예를 들면 다음과 같습니다.

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