다음은 세 가지 해결책입니다.
해결 방법 # 1-모양 : 없음-Internet Explorer 10-11 해결 방법 ( 데모 )
-
appearance: noneselect 요소에 설정된 기본 화살표를 숨기려면background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
브라우저 지원 :
appearance: noneInternet Explorer 11 이상 및 Firefox 34 이상을 제외하고 브라우저 지원 기능이 우수합니다 ( 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(http://www.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 9 이상 및 Firefox 34 이상에 대한 브라우저 지원이 필요한 경우 계속 읽으십시오 ...
해결 방법 # 2 기본 화살표 ( 데모 ) 를 숨기려면 select 요소를 자릅니다.
-
(자세한 내용은 여기를 참조하십시오)
랩 select로모그래퍼 사업부에서 요소를 고정 폭 과 overflow:hidden.
그런 다음 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(http://www.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를 기본 제공 화살표로 되돌릴 수 있습니다.
NB : 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(http://www.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]-->