[javascript] 커스텀 스타일링 SELECT 박스 만들기

HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다.

 

select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며,

모바일에서는 폰 자체 UI가 적용되기때문이다.

웹디자이너분이 넘기는 시안은 보통 커스텀 셀렉박스인데 사실 나는 코딩하는 입장에서 귀찮기때문에 웬만하면 복잡한 스타일링을 지양하고싶긴하다ㅎㅎ

 

아무튼 기본 UI에서 벗어나기 위해 자바스크립트를 이용해 스타일링을 해보자.

옵션값이 중복으로 들어가는 다소 귀찮은 코드이다.

그래도 모바일에서

꾸며진 모습이 깔끔해 맘에 든다.

 

See the Pen Custom select box by sel (@wimmwell) on CodePen.

코드펜의 콘솔을 열어서 확인해보면

옵션 값을 선택할때마다 값이 찍히는 것을 볼 수 있다.