select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript)

1. Select CSS Customizing 

 

Select 태그의 외형은 주로 각 브라우저에서 정의 합니다. 

Chrome 과 IE

보다 시피 크롬(왼쪽), IE(오른쪽) 이 똑같이 보이면서도 미세 하게 다름니다. 

공통적으로 둘 다 그리 예쁘게 생기진 않았습니다. 

 

각 프로젝트 별로 스타일에 맞게 css를 통해 외형을 바꿀 수 있습니다. 

사이즈나 폰트 컬러 등은 변경이 가능하지만, 일부 제한적으로 통제되기 때문에 (화살표 이미지 등) 

약간의 편법(?)을 통하여 외형을 변경 할 수 있습니다. 

 

 

1-1. Select 기본 화살표 없애기

<select name="fruits" class="select">
  <option disabled selected>fruits 🍊</option>
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="grape">grape</option>
  <option value="melon">melon</option>
</select>

/* IE */
select::-ms-expand { 
	display: none;
}
.select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

 

appearance none을 통해 화살표를 없앨 수 있습니다. 

단, IE는 select::expand 를 없애야 사라집니다. 

 

1-2. select에 background 이미지 넣기

이후 select 자체에 백그라운드 이미지를 넣어줍니다. 

/* IE */
{ ... }
.select {
  { ... }
  width: 150px;
  height: 35px;
  background: url('https://freepikpsd.com/media/2019/10/down-arrow-icon-png-7-Transparent-Images.png') calc(100% - 5px) center no-repeat;
  background-size: 20px;
  padding: 5px 30px 5px 10px;
  border-radius: 4px;
  outline: 0 none;
}
.select option {
  background: black;
  color: #fff;
  padding: 3px 0;
}

위의 소스를 보면 option 에도 background와 color도 커스텀이 가능한 것을 알 수 있습니다. 

결과

select background 커스텀

 

1-3. select 와 이미지를 분리하기 

단순히 외형만 바꾸고 싶다면 위의 방법이 마크업이 제일 간단합니다. 

하지만 좀 더 커스터마이징의 범위를 넓히고 싶다면 아이콘만 따로 분리하는 것도 하나의 방법입니다. 

예를 들어, select에 focus시 아이콘을 회전 시킬 수 있습니다. 

물론 select를 한번 감싸고 이미지를 추가해야 합니다.

<div class="selectBox">
  <select name="fruits" class="select">
    <option disabled selected>fruits 🍊</option>
    <option value="apple">apple</option>
    <option value="orange">orange</option>
    <option value="grape">grape</option>
    <option value="melon">melon</option>
  </select>
  <span class="icoArrow"><img src="https://freepikpsd.com/media/2019/10/down-arrow-icon-png-7-Transparent-Images.png" alt=""></span>
</div>

.selectBox {
  position: relative;
  width: 150px;
  height: 35px;
  border-radius: 4px;
  border: 2px solid lightcoral;
}
.selectBox .select {
  width: inherit;
  height: inherit;
  background: transparent;
  border: 0 none;
  outline: 0 none;
  padding: 0 5px;
  position: relative;
  z-index: 3; // select가 위로 올라와야 함
}
.selectBox .select option {
  background: lightcoral;
  color: #fff;
  padding: 3px 0;
  font-size: 16px;
}
.selectBox .icoArrow {
  position: absolute; 
  top: 0; 
  right: 0; 
  z-index: 1; 
  width: 35px; 
  height: inherit;
  border-left: 2px solid lightcoral;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectBox .icoArrow img {
  width: 50%;
  transition: .3s; // 부드럽게 회전
}

.selectBox .select:focus + .icoArrow img {
  transform: rotate(180deg);
}

결과

화살표 아이콘 분리

이 외에도 다양한 방법이 있겠지만 더 많은 조작과 제한이 있는 option의 커스터마이징을 더 자유롭게 하고 싶다면, 

select 태그를 사용하지 않고 직접 만드는 것도 방법입니다. 

css부터 script 까지 직접 만들어야 하는 번거로움도 있습니다. 

 

2. Select 직접 구축

<div class="selectBox2 ">
  <button class="label">fruits 🍊</button>
  <ul class="optionList">
    <li class="optionItem">apple</li>
    <li class="optionItem">orange</li>
    <li class="optionItem">grape</li>
    <li class="optionItem">melon</li>
  </ul>
</div>

.selectBox2 * { box-sizing: border-box; }
.selectBox2 {
  position: relative;
  width: 150px;
  height: 35px;
  border-radius: 4px;
  border: 2px solid lightcoral;
  background: url('https://freepikpsd.com/media/2019/10/down-arrow-icon-png-7-Transparent-Images.png') calc(100% - 7px) center no-repeat;
  background-size: 20px;
  cursor: pointer;
}

.selectBox2:after {
  content: '';
  display: block; 
  width: 2px;
  height: 100%; 
  position: absolute; 
  top: 0; 
  right: 35px;
  background: lightcoral;
}

.selectBox2 .label {
  display: flex;
  align-items: center;
  width: inherit;
  height: inherit;
  border: 0 none;
  outline: 0 none;
  padding-left: 15px;
  background: transparent;
  cursor: pointer;
}

.selectBox2 .optionList {
  position: absolute; 
  top: 28px;
  left: 0;
  width: 100%;
  background: lightcoral;
  color: #fff;
  list-style-type: none;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  max-height: 0;
  transition: .3s ease-in;
}

.selectBox2.active .optionList {
  max-height: 500px;
}

.selectBox2 .optionItem {
  border-bottom: 1px dashed rgb(170, 72, 72);
  padding: 5px 15px 5px;
  transition: .1s;
}

.selectBox2 .optionItem:hover {
  background: rgb(175, 93, 93);
}

.selectBox2 .optionItem:last-child {
  border-bottom: 0 none;
}

// 스크롤 커스텀
.selectBox2 .optionList::-webkit-scrollbar {width: 6px;}
.selectBox2 .optionList::-webkit-scrollbar-track {background: transparent; }
.selectBox2 .optionList::-webkit-scrollbar-thumb {background: #303030; border-radius: 45px;}
.selectBox2 .optionList::-webkit-scrollbar-thumb:hover {background: #303030;}

 

이렇게 하면 앞서 커스텀한 select 태그와 외형이 거의 같아집니다. 

그리고 select 처럼 사용하기 위해 기능을 추가하는 일만 남았습니다. 

* 기능 

1. 클릭시 옵션 목록이 열림

2. 한번 더 클릭시 옵션 목록이 닫힘

3. 옵션 클릭시 옵션의 텍스트가 select 안으로 들어가면서 옵션 목록이 닫힘

 

/* 화살표 함수 */
const label = document.querySelector('.label');
const options = document.querySelectorAll('.optionItem');

// 클릭한 옵션의 텍스트를 라벨 안에 넣음
const handleSelect = (item) => {
  label.parentNode.classList.remove('active');
  label.innerHTML = item.textContent;
}
// 옵션 클릭시 클릭한 옵션을 넘김
options.forEach(option => {
	option.addEventListener('click', () => handleSelect(option))
})

// 라벨을 클릭시 옵션 목록이 열림/닫힘
label.addEventListener('click', () => {
  if(label.parentNode.classList.contains('active')) {
  	label.parentNode.classList.remove('active');
  } else {
  	label.parentNode.classList.add('active');
  }
})

/* 일반함수 */
const label = document.querySelector('.label');
const options = document.querySelectorAll('.optionItem');
// 클릭한 옵션의 텍스트를 라벨 안에 넣음
const handleSelect = function(item) {
  label.innerHTML = item.textContent;
  label.parentNode.classList.remove('active');
}
// 옵션 클릭시 클릭한 옵션을 넘김
options.forEach(function(option){
  option.addEventListener('click', function(){handleSelect(option)})
})
// 라벨을 클릭시 옵션 목록이 열림/닫힘
label.addEventListener('click', function(){
  if(label.parentNode.classList.contains('active')) {
    label.parentNode.classList.remove('active');
  } else {
    label.parentNode.classList.add('active');
  }
});

결과

div로 만든 select

---

 

커스텀된 셀렉트 박스가 개수를 알 수 없는 여러개인 경우 for문으로 각각 하위의 값을 찾아서 따로 기능을

붙여줘야합니다! 아래에 참고소스를 추가하였습니다. 

 

 

* 단일인 경우 

 

 

* 멀티인 경우