[CSS] select 화살표 디자인 적용하기

일단 select의 화살표는 너무 못생겼다.

그리고 브라우저별 디자인이 제각각이 되기 때문에 디자인을 적용하고 싶은 마음이 들 수밖에 없다.

 

그래서 background css를 적용해서 예쁘게 바꾸어준다.

생각보다 간단하므로 적용해보시길!

 

[HTML]

<select>
    <option>사과</option>
    <option>딸기</option>
    <option>복숭아</option>
</select>

 

[CSS]

select {
    appearance:none;
}

기존 default 화살표를 없애주는 css.

크로스브라우징으로 적용할 때에는 -moz-, -webkit-, -ms-를 자신의 프로젝트에 맞는  각각 한 번씩 더 적어주면 된다.

 

그리고 추가하고픈 화살표 디자인을 background로 넣어준다.

 

 

[CSS]

select{
    appearance:none;
    background:url('../img/icon_select_arrow.png') no-repeat right 24px center;
}

right는 select box 기준 오른쪽에 24px 떨어진 만큼 위치시킨다는 뜻이고,

center는 세로 기준 중앙에 위치시킨다는 의미이다.