CSS만으로 <option> 스타일을 지정하는 방법은 무엇입니까?

참고 :이 질문은 사용자 지정 드롭 다운을 만드는 것이 아닙니다. <option>CSS의 선택 요소 내에서 요소 스타일링 가능성에 관한 것입니다.

브라우저 간 호환성 <option>이있는 <select>요소 의 스타일을 어떻게 지정할 수 있습니까? 드롭 다운을으로 변환하도록 사용자 정의하는 많은 JavaScript 방법을 알고 있지만 이에 <li>대해 묻지 않습니다.

<select class="select">
    <option selected>Select</option>
    <option>Blue</option>
    <option >Red</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Brown</option>
</select>

IE9 +, Firefox 및 Chrome과의 호환성과 함께 CSS로만 가능한 것이 무엇인지 묻고 있습니다.

나는 이것처럼 또는 가능한 한 가깝게 스타일을 원합니다.

http://jsfiddle.net/jitendravyas/juwz3/3/을 시도 했지만 Chrome은 글꼴 색상을 제외한 스타일을 표시하지 않지만 Firefox는 더 많은 것을 표시합니다. Chrome에서도 테두리 및 패딩을 사용하는 방법은 무엇입니까?

2015 년 5 월 수정

면책 조항 : 아래 링크 된 답변에서 스 니펫을 가져 왔습니다.

중요한 업데이트!

WebKit 외에도 Firefox 35 부터 다음 appearance속성 을 사용할 수 있습니다.

이제 콤보 박스 -moz-appearance의 none값 과 함께 사용 하면 드롭 다운 버튼이 제거됩니다.

이제 기본 스타일을 숨기려면 select 요소에 다음 규칙을 추가하는 것만 큼 쉽습니다.

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

IE 11 지원의 경우 [ ::-ms-expand] [15]를 사용할 수 있습니다 .

select::-ms-expand { /* for IE 11 */
    display: none;
}

이전 답변

불행히도 순수한 CSS를 사용하여 요청하는 것은 불가능합니다. 그러나 여기에 해결 방법으로 선택할 수있는 유사한 것이 있습니다. 아래 라이브 코드를 확인하세요.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

편집하다

얼마 전에 물어 보신 질문입니다. JavaScript없이 CSS로만 <select> 드롭 다운 스타일을 지정하는 방법은 무엇입니까? 거기에 나와 있듯이 Chrome과 Firefox에서만 원하는 것을 얻을 수 있습니다. 그렇지 않으면 안타깝게도 선택 스타일을 지정하기위한 크로스 브라우저 순수 CSS 솔루션이 없습니다.

옵션 요소의 스타일을 지정하는 브라우저 간 방법은 없습니다. 확실히 두 번째 스크린 샷 정도까지는 아닙니다. 굵게 표시하고 글꼴 크기를 설정할 수 있지만 그게 전부입니다.

JavaScript로 기능을 재정의하기 전과하지 않고 일부 항목을 사용해 보았지만 Chrome에서는 가능하지 않다고 생각합니다. 플러그인을 사용하든 자체 코드를 작성하든 CSS 만 Chrome / Safari에 적합하지 않으며 말했듯이 Firefox가 더 잘 처리됩니다.