그누보드 - 셀렉트박스 커스텀 > 그누보드5 팁자료실

셀렉트박스 커스텀 정보

셀렉트박스 커스텀

본문

작업하다 보니 맥에서 사파리 브라우저에서 커스텀한 사이즈되로 셀렉트박스가 안나오는 문제가 발생했었습니다.

방법을 찾다찾다 안되어 그냥 만들었습니다.

-- 높이값이 원래 48픽셀짜리로 나와야 하는데 기본형 셀렉트박스인체로 나오더군요

-- 검색한 방법은 select { line-height: 48px; } 로 하라는데 안되더군요. OTL

본 소스는 적용하기 전 프로토타입이므로 변경이 더 쉬울겁니다.

css나 html을 좀 아시는 분이라면 자유롭게 변경하실 수 있을겁니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery.js"></script>
</head>
<body>
<style>
.custom-select {
   width: 100%;
   height: 50px;
   border: 1px solid #dedede;
   position: relative;
}
.custom-select select,
.custom-select input[type="radio"] {
   display: none;
}
.custom-select label {
   display: block;
   position: absolute;
}
.custom-select label,
.custom-select button {
   width: 100%;
   height: 100%;
}
.custom-select button {
   border-left: 1px solid #dedede;
   border-right: 1px solid #dedede;
   border-bottom: 1px solid #dedede;
   border-top: 0;
   border-radius: 0;
   background-color: transparent;
   padding: 0 15px;
   text-align: left;
   outline: 0;
}
.custom-select button:focus {
   box-shadow: 0;
   border-radius: 0;
   border-color: #dedede;
   outline: 0;
}
.custom-select button {}

.options {
   position: absolute;
   width: 100%;
   height: 50px;
   top: -50px;
   display: none;
   z-index: -1;
}
.options.on {
   top: 50px;
   display: block;
   z-index: 10;
}
.custom-select .options button:not(:first-child) {
   border-top: 0;
}
.custom-select .options button.active {
   background-color: #ccccde;
}
#select-value .arrow {
   width: 0;
   height: 0;
   position: relative;
   left: calc(100% - 30px);
}
#select-value .arrow:after {
   position: absolute;
   content: "";
   border-top: 10px solid #333333;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-bottom: 0px;
}

#select-value.on .arrow:after {
   border-top: 0px;
   border-bottom: 10px solid #333333;
}
</style>
<div class="custom-select">
   <button id="select-value">
       <span class="value"></span>
       <span class="arrow"></span>
   </button>
   <select name="" id="custom-select">
       <option value="a01">01</option>
       <option value="a02">02</option>
       <option value="a03">03</option>
       <option value="a04">04</option>
       <option value="a05">05</option>
       <option value="a06">06</option>
       <option value="a07">07</option>
       <option value="a08">08</option>
       <option value="a09">09</option>
       <option value="a10">10</option>
   </select>
   <div class="options"></div>
</div>
<script>
(function($) {
   let x = 0; // 각 label <=> button의 상호 작용을 위한 부여 ID 값의 카운트
   let top = 0; // 각 option의 css top 값
   let selectBoxValue = ''; // 선택한 버튼과 option의 값을 비교하기 위해 필요한 값
   jQuery('#custom-select option').each(function() {
       let v = jQuery(this).val(); // 옵션의 value
       let t = jQuery(this).text(); // 옵션의 text
       let createHtml = ''; // html 초기화
       top = x * 50; // top 위치
       createHtml += '<label for="custom-select' + x + '">';
       createHtml += '<button type="button" data-val="' + v + '" id="custom-select' + x + '">';
       createHtml += t;
       createHtml += '</button>';
       createHtml += '</label>';
       jQuery('.custom-select .options').append(createHtml);
       jQuery('label[for="custom-select' + x + '"]').css({
           'top' : top
       });
       x++;
   });