select 스타일 주기

select 박스는 폼태그로 브라우저에서 스타일정의가 어렵게 만들었다.

접근성에 스타일변경을 막은것이기 때문이다.

그러나 ie9 이상부터는 select 도 스타일을 줄수 있게 되었다. css로!

html

<div class="select">

<select><option>글자</option></select>

</div>

css

.select {display: inline-block;position: relative;}

.select:after {display: inline-block;content: '';position: absolute;right: 9px;top: 11px;width: 8px;height: 8px;border-bottom: 1px solid #363636;border-left: 1px solid #363636; -webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

select {height: 36px;padding: 0 25px 0 13px;border: 1px solid #ddd;background: #f9f9f9;line-height: 36px;-webkit-appearance:button;-moz-appearance:button;appearance:button;}

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

여기서 중요한거는 ie9 이상에서 apperance 초기화가 안된다.

그래서 아래에 또 추가를 해줘야 한다.

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