CSS만 있는 <select> 드롭다운을 스타일링 하는 방법

질문 : CSS만 있는 <select> 드롭다운을 스타일링 하는 방법

---

<select> 드롭 다운 스타일을 지정하는 CSS 전용 방법이 있습니까?

JavaScript없이 가능한 한 인간적으로 <select> 양식의 스타일을 지정해야합니다. CSS에서 그렇게하기 위해 사용할 수있는 속성은 무엇입니까?

이 코드는 모든 주요 브라우저와 호환되어야합니다.

• Internet Explorer 6, 7, 8
• Firefox
• 원정 여행

JavaScript : Example으로 만들 수 있다는 것을 알고 있습니다.

그리고 저는 단순한 스타일링에 대해 말하는 것이 아닙니다. CSS만으로 할 수있는 최선의 방법을 알고 싶습니다.

Stack Overflow 에서 비슷한 질문 을 찾았습니다.

그리고 이것은 Doctype.com에 있습니다.

답변

---

다음은 세 가지 솔루션입니다.

솔루션 # 1-모양 : 없음-Internet Explorer 10-11 해결 방법 ( 데모 )

-

기본 화살표 세트 appearance: none background-image 사용자 정의 화살표 추가

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

브라우저 지원 :

appearance: none Internet Explorer를 제외하고는 브라우저 지원이 매우 우수 하지 않습니다 (caniuse).

이 기술을 개선하고 다음을 추가하여 Internet Explorer 10 및 Internet Explorer 11에 대한 지원을 추가 할 수 있습니다.

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

Internet Explorer 9가 문제가되는 경우 기본 화살표 (이제 두 개의 화살표가 있음을 의미 함)를 제거 할 방법이 없지만 펑키 한 Internet Explorer 9 선택기를 사용할 수 있습니다.

최소한 사용자 지정 화살표를 실행 취소하려면 기본 선택 화살표를 그대로 둡니다.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

 

모두:

 

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

이 솔루션은 쉽고 우수한 브라우저 지원을 제공합니다. 일반적으로 충분합니다.

---

Internet Explorer에 대한 브라우저 지원이 필요한 경우 미리 읽어보십시오.

솔루션 # 2 기본 화살표를 숨기려면 선택 요소를 자릅니다 ( 데모 )

-

(여기에서 더 많은 것을 읽으십시오)

고정 너비 와 overflow:hidden 으로 div에서 select 요소를 래핑합니다.

그런 다음 select 요소에 div보다 약 20 픽셀 더 큰 너비를 지정합니다.

select 요소의 기본 드롭 다운 화살표가 숨겨지고 ( overflow:hidden 으로 인해) 원하는 배경 이미지를 div의 오른쪽에 배치 할 수 있습니다.

이 접근 방식의 장점 은 브라우저 간 (Internet Explorer 8 이상, WebKit 및 Gecko )이라는 것입니다. 그러나이 접근 방식의 단점 은 옵션 드롭 다운이 오른쪽으로 튀어 나온다는 것입니다 (옵션 요소가 선택 요소의 너비를 사용하기 때문에 숨긴 20 픽셀 기준).

[그러나 사용자 지정 선택 요소가 모바일 장치에만 필요한 경우에는 각 전화기가 기본적으로 선택 요소를 여는 방식 때문에 위의 문제는 적용되지 않습니다. 따라서 모바일의 경우 이것이 최상의 솔루션 일 수 있습니다.]

 

 

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

---

Firefox (버전 35 이전)에서 사용자 지정 화살표가 필요하지만 이전 버전의 Internet Explorer를 지원할 필요가없는 경우 계속 읽으십시오 ... 해결 방법 # 3- pointer-events 속성 사용 ( 데모 )- ( 여기에서 더 많은 것을 읽으십시오) 여기서 아이디어는 기본 드롭 다운 화살표 위에 요소를 오버레이 (맞춤형 화살표를 만들기 위해) 한 다음 포인터 이벤트를 허용하지 않는 것입니다.

장점 : WebKit 및 Gecko에서 잘 작동합니다. 보기에도 좋습니다 ( option 요소가 돌출되지 않음).

단점 : Internet Explorer (Internet Explorer 10 이하)는 pointer-events 지원하지 않으므로 사용자 지정 화살표를 클릭 할 수 없습니다. 또한이 방법의 또 다른 (분명한) 단점은 포인터 이벤트를 비활성화했기 때문에 호버 효과 또는 손 커서로 새 화살표 이미지를 대상으로 지정할 수 없다는 것입니다! 그러나이 방법을 사용하면 Modernizer 또는 조건부 주석을 사용하여 Internet Explorer를 표준 기본 제공 화살표로 되돌릴 수 있습니다.

주의 : Internet Explorer 10은 conditional comments 지원하지 않습니다.이 방법을 사용하려면 Modernizr 을 사용해야합니다. 그러나 여기에 설명 된 CSS 해킹을 사용하여 Internet Explorer 10에서 포인터 이벤트 CSS를 제외 할 수 있습니다.

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

출처 : https://stackoverflow.com/questions/1895476/how-do-i-style-a-select-dropdown-with-only-css