selectbox 화살표 꾸미는 방법

CSS에서 selectbox는 네이티브로 꾸미기가 까다롭습니다. 네이티브 즉, 자체 지원으로 기본적으로 커스터마이징을 할 수 없도록 되어있습니다. 그래서 화살표를 직접 꾸미기것이 아닌 없애고 새로운 화살표를 만들어야 합니다. 이미지를 삽입해서 꾸며도 되지만 저는 화살표를 만들겠습니다.

 

오른쪽 화살표 꾸미는 방법

크롬으로 보면 화살표가 그나마 이쁘게 보이지만 IE로 보면 체크박스형태로 표현된것을 볼 수 있습니다. 크롬, IE 할거없이 화살표를 없애고 커스터마이징으로 직접 꾸미는 방법을 알려드리겠습니다.

 

selectbox 화살표 꾸미기 예제

 

Example

select:

select {
  appearance : none ;

  -webkit-appearance : none ;
}

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

}

.select-arrow {
  pointer-events : none ;

  border-width : 8px 5px 0 5px ;
  border-style : solid ;

  border-color : #999 transparent transparent tramsparent ;
}
직접 해보기

 

화살표 없애기

브라우저마다 다른 화살표는 각각 다른 코딩으로 없애야 합니다. 네이티브를 해제하면 화살표가 없어진것을 확인할 수 있습니다.

 

appearance는 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현합니다. 따라서 select와 같이 네이티브로 지원되는 것을 해제하거나 추가할 때 사용할 수 있습니다.

 

webkit, moz, ms, o는 CSS 접두어로 주로 크로스브라우징을 위해 사용됩니다. 왼쪽부터 크롬, 파이어폭스, IE, 오페라 순으로 브라우저마다 다르게 적용됩니다. IE의 경우 아래쪽 화살표를 나타내는 expand를 none으로 해주면 없어집니다. 따라서 위와 같이 select::ms-expand{display:none}을 해주면 없어집니다. 다만, 이속성은 비표준이기 때문에 사용할 때 주의해야 합니다.

 

 

 

화살표 만들기

화살표를 없앴다면 이제 만들어야 합니다. select 태그 아래에 div 태그를 만들어주고 꾸미겠습니다. 화살표의 실선, 모양, 색상을 만들고 select의 화살표를 만들 수 있게 추가해줍니다.

 

pointer-events는 hover, action과 같이 특정 엘리먼트의 트리거 역할을 합니다. 즉, 강제로 제거할 수 있습니다. 자세한 설명은 이곳에서 참고하실 수 있습니다. 

이 글을 공유하기

댓글(0)

Designed by JB FACTORY