[CSS] selectbox 디자인하기

input요소 중에 selectbox는 css스타일을 입히기 조금 까다로운 편에 속한다.

박스만 디자인이 들어가면 그나마 쉬운데 option요소까지 디자인되어있다면 플러그인이나,

자바스크립트 사용하여 구현해야한다.

 

먼저 css만을 사용하여 셀렉트박스와 화살표 스타일만 변경하는 방법을 소개하겠다.

1. 가장 먼저, 웹에서 제공하는 기본 스타일을(화살표) 보이지 않게 처리한다.

주의할 점은 appearance 속성은 IE에는 적용되지 않는다.

IE를 고려한다면 -ms-expand라는 가상 선택자로 스타일을 초기화시켜주어야 한다.

select{
  appearance: none;
  -moz-appearance: none; /* Firefox */ 
  -webkit-appearance: none; /* Safari and Chrome */
}

/* IE 기본 스타일 제거 */
select::-ms-expand{
	display: none; /* IE 10, 11 */
}

 

2. 디자인대로 화살표를 스타일링한다.

아래에 나온 방법 중 원하는 방식으로 선택해 디자인하면 된다.

2-1 배경 속성을 이용하여 화살표 변경 (이미지 사용)

select {
  /* background : url(이미지 경로) 좌우위치 상하위치 반복여부  */
  background: url(./images/ico.png) 95.5% center no-repeat;
}

2-2 가상 속성 ::after를 이용하여 화살표 변경 (이미지 없이 화살표 만드는 방법)

selectBox를 감싸주는 태그가 더 필요하다.

<div class="wrap">
  <select name="fruit" id="fruit" class="fruit">
    <option value="apple">사과</option>
    <option value="orange">오렌지</option>
    <option value="banana">바나나</option>
  </select>
</div>

.wrap{
  display: inline-block;
  position: relative;
}
.wrap:after{
  content:'';
  display: block;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 20px;
  transform: translate(0,-50%);
  width: 0;
  height: 0;
  border:10px solid red;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:none;
}

3. option 스타일 및 다양한 selectBox 디자인 변경

3-1 selectBox를 사용할 수 없다. 대체 태그로 마크업 하여 javascript로 구현

div나 dl 등 다른 요소로 마크업 한 뒤 자바스크립트로 각 동작을 구현해주어야 한다.

관련 사항은 아래의 글에서 볼 수 있다.

[javascript] div와 ul, li를 사용하여 selectBox 구현하기