[CSS] 인터넷익스플로러(IE)에서 셀렉트(Select) 화살표 제거하기

인터넷익스플로러에서 Select를 사용하고 있다면 스타일을 바꾸기 위한 코드를 작성해봤을거다.

기본 화살표는 투박하고 아름답지 못하기 때문에 디자이너의 입맛을 맞춰주기 위해서 셀렉트 우측 화살표 정도는 디자인에 맞춰서 아름답게 꾸며주자!

 

IE에서 Select 화살표가 사라지지 않는다?!

 

문제

아래와같이 코드를 준다면 뭔가 하나 부족한게 있다. 바로 IE에서 select를 제거하는 방법이다.

select{
	appearance:none; //기본
    -webkit-appearance:none; //크롬
    -o-appearance:none; //오페라
    -moz-appearance:none; //파이어폭스
}

문제해결

"appearance면 끝나는거 아냐?!" 라고 생각할 수 있지만 IE를 위해서 한가지 코드를 더 추가해주면 된다.

select::-ms-expand {
	display:none
}

결과

 

"EASY"