html 드롭 다운 목록에 패딩을 추가하려면 어떻게해야합니까?

Question

html "select"태그의 옵션에 패딩을 추가하고 싶습니다.

"select"및 "option"의 스타일 속성에 추가하려고하는데 IE에서 작동하지 않습니다.

어떻게해야합니까?

Answer 1

OK, I는 모두 1990 년대 소리를 싫어하지만, 단순히 사전 및 앱 종료 옵션 텍스트 공간이 원하는 목표를 위해 허용 될 수?

Answer 2

CSS :

option{ 
padding: 0.5em; 
} 

Answer 3

상자 크로스 브라우저 드롭 다운 스타일을하기가 어렵습니다. 어떤 종류의 컨트롤을 얻으려면 JavaScript에서 대체 코드를 코딩해야합니다. 그러나 경고 :

• 사용자가 아래로 놓기를 사용하여 어려움이있을 수 있음을 기억하십시오 - JS와 선택 요소를 교체 계정
• 에 usabilty을 -이 접근성 문제 (또한 JS 지원없이 사용자 수)

Answer 4

FF3 + 미도리 (아래에서 작동하고, 아마도 다른 웹킷 브라우저) 형태의 입력을 사용하는 것은 :

select 
     {width: 14em; 
     margin: 0 1em; 
     text-indent: 1em; 
     line-height: 2em;} 

select * {width: 14em; 
     padding: 0 1em; 
     text-indent: 0; 
     line-height: 2em;} 

폭 EN을 허용하는 것이다 작동하지 않을 때 표시되는 select 상자의 여유 공간은 여백이 항상하는 일을합니다. text-indent은 선택 상자의 왼쪽 경계와 내부 텍스트 사이의 여백을 지정하는 데 사용됩니다. line-height은 수직 간격을 허용하기위한 것입니다.

IE에서의 사용법에 대해서는 언급 할 수 없습니다. 그렇다면 누구나 적응할 수 있다면 적응할 수 있다면 좋을 것입니다.

select (select *)의 드롭 다운 부분이 어떤 이유로 든 FF3 외부에서 영향을받지 않으므로 아무 것도 답변하지 않으려 고하는 질문 인 경우 새로운 제안이 없으면 사과합니다.

데모에서 : http://davidrhysthomas.co.uk/so/select-styling.html

Answer 5

나는 어떤 이유로이 패딩이나 간격을 사용할 수 없습니다.

$(document).click(function(){ 
    $('#selector option').each(function(){ 
    $(this).html("  "+$(this).text()); 
    }); 
}); 

Answer 6

은 이제 SELECT

.listBox option{ 
    padding:4px; 
    ...etc 
    } 

의 옵션에 대한 CSS를 정의하는 SELECT

.listBox{ 
    width: 200px; 
    ...etc 
} 

에 대한 클래스를 만듭니다 :이처럼 보이는 jQuery를 솔루션으로 갔다 IE 10에서 테스트 됨