[CSS] CSS를 사용하여 select box 디자인하기

퍼블리싱을 하다보면 이쁘지않은 select 박스 때문에 고민을 한번씩은 할거에요. (특히 익스 ..)

저도 그러다 보니 찾아보게 된 select box css만으로 style 지정하기 !

 

일단 브라우저상에서 제공하는 드롭다운 화살표를 제거를 해줍니다.

크로스브라우징을 위해 아래의 코드를 모두 써주어야 합니다.

select 
{
  -webkit-appearance:none;
  -moz-appearance:none;
  -o-appearance:none;
   appearance:none; 
}

익스10/익스11

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

 

그 다음엔 select박스에 background 이미지를 넣어 드롭다운 화살표를 생성해주면 됩니다! 참 쉽죵

select {border:1px solid #dedede;background:url(../images/select_arrow.png) center right 20px no-repeat;padding: 1rem 5rem 1rem 2rem}