셀렉트박스 커스텀 정보
셀렉트박스 커스텀본문
작업하다 보니 맥에서 사파리 브라우저에서 커스텀한 사이즈되로 셀렉트박스가 안나오는 문제가 발생했었습니다.
방법을 찾다찾다 안되어 그냥 만들었습니다.
-- 높이값이 원래 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++;
});
var selectedValue = jQuery('#custom-select option:selected').text();
jQuery('.custom-select .options label').each(function() {
if(selectedValue == jQuery(this).find('button').text()) {
jQuery(this).find('button').addClass('active');
}
});
jQuery(document).on('click', '.custom-select button#select-value', function() {
jQuery('.options').toggleClass('on');
jQuery(this).toggleClass('on');
});
jQuery(document).on('click', '.custom-select .options.on button', function() {
let text = jQuery(this).text();
jQuery('.custom-select .options.on button').removeClass('active');
jQuery(this).addClass('active');
jQuery('#custom-select option').each(function() {
if(jQuery(this).text() == text) {
jQuery(this).prop('selected', true);
jQuery('.options').removeClass('on');
jQuery('#select-value').removeClass('on');
}
});
selectBoxValue = jQuery('#custom-select option:selected').text();
jQuery('#select-value .value').text(selectBoxValue);
});
selectBoxValue = jQuery('#custom-select option:selected').text();
jQuery('#select-value .value').text(selectBoxValue);
})(jQuery);
</script>
</body>
</html>
그럼 이만...
커스텀 하시는 분들 모두모두 화이팅입니다.
-- 그냥 쓰시기엔 모양이 안이쁠겁니다~ 아마도 확실히...?
-- 제가 만들었고 작업하시는 분들 그냥 참고하시라고 드리는거니 라이센스는 없습니다.
-- 크로스브라우징 안되어 있습니다 사실 만들자 마자 업로드 하는 글이에요~
ps : 맘에 드시면 슬쩍 추천 투척 해주세용~ +_+
6
댓글 3개
https://codepen.io/sinbi/pen/qBbaMdd