스타일링하는 방법

스타일링하는 방법 CSS만으로?

---

참고 :이 질문은 사용자 지정 드롭 다운을 만드는 것이 아닙니다. <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>

편집하다

Here is the question that you asked some time ago. How to style a <select> dropdown with CSS only without JavaScript? As it tells there, only in Chrome and to some extent in Firefox you can achieve what you want. Otherwise, unfortunately, there is no cross browser pure CSS solution for styling a select.

---

There is no cross-browser way of styling option elements, certainly not to the extent of your second screenshot. You might be able to make them bold, and set the font-size, but that will be about it...

---

I've played around with select items before and without overriding the functionality with JavaScript, I don't think it's possible in Chrome. Whether you use a plugin or write your own code, CSS only is a no go for Chrome/Safari and as you said, Firefox is better at dealing with it.

참고 URL : https://stackoverflow.com/questions/8430279/how-to-style-the-option-with-only-css