HTML의 스타일 지정 드롭 다운 요소

안녕하세요, HTML의 옵션 태그에 가까운 드롭 다운의 스타일을 변경하고 싶습니다. Firefox에서는 제대로 작동하지만 IE와 Google 크롬에서는 제대로 작동하지 않습니다.HTML의 스타일 지정 드롭 다운 요소

패딩은 파이어 폭스에서만 작동합니다. 배경색은 모든 브라우저에서 작동하지만 IE에서는 선택한 값에서도 볼 수 있습니다.

Demo with JSFiddle

HTML :

<label for="locale">locale:<em>*</em></label> 
<select name="locale" id="locale"> 
    <option selected="selected">en_CA</option> 
    <option>en_US</option> 
    <option>fr_FR</option> 
    <option>fr_CA</option> 
    <option>ja_JP</option> 
</select><br />

CSS :

label{ 
    margin: 5px 0px 10px 0px; 
    padding: 5px; 
    height: 22px; 
    display: inline-block; 
    width: 100px; 
} 

label em{ 
    color: red; 
    font-family: Arial; 
    font-weight: bold; 
} 

select{ 
    color: #333; 
    margin: 5px 0px 10px -5px; 
    padding: 5px; 
    height: 32px; 
    width: 262px; 
    border: #999 1px solid; 
} 

select option { 
    padding: 5px 8px; 
    background: #ddd; 
}

출처

2013-07-04 Niklas

크로스 브라우저 지원을받지 않기 때문에 선택 스타일을 조작하지 않는 것이 가장 좋습니다 – Huangism

웹킷 브라우저 (사파리, 크롬 등) select 요소에 패딩을 허용하지 않습니다. 그러나 위쪽 및 아래쪽 패딩의 높이와 왼쪽 패딩의 텍스트 들여 쓰기를 조작하여 패딩을 모방 할 수 있습니다.

업데이트 : option 요소의 배경색은 동일합니다. Webkit은 그것을 허용하지 않으며, 예를 들어 정렬되지 않은 목록과 스타일을 사용하여 자신의 Javascript 구현을 수행하는 것 이외의 해결 방법이 있다고 생각하지 않습니다.

출처

2013-07-04 20:57:17

높이가 작동하지 않습니다. 파이어 폭스에서만 문제는 없습니다. – Niklas

Chrome에서 높이가 정상적으로 작동합니다 (OS X 이상). 예 : http://jsfiddle.net/b5m4G/ –

오, 미안하지만, 나는 틀린 질문을했다. 옵션 태그의 스타일을 지정하고 전체 드롭 다운 것은 아닙니다. 드롭 다운 상자의 스타일은 문제가되지 않습니다. – Niklas

옵션 태그를 스타일링 할 수 있다고 생각하지 않습니다. 나는 그것이 OS 또는 무언가를 기반으로하는 어딘가에서 그것을 읽은 것 같아요 ...

출처

2013-07-05 07:43:06

HTML의 스타일 지정 드롭 다운 요소

답변

관련 문제