셀렉트박스

코드

- html

<select class="styled">
							<option value="">option 01</option>
							<option value="">option 02</option>
							<option value="">option 03</option>
							<option value="">option 04</option>
						</select>

<select class="styled">
							<option>option 01</option>
							<option>option 02</option>
							<option disabled>option 03</option>
							<option>option 04</option>
							<option disabled>option 05</option>
							<option>option 06</option>
							<option>option 07</option>
							<option disabled>option 08</option>
							<option disabled>option 09</option>
							<option>option 10</option>
						</select>

<select class="styled">
							<option>option 01</option>
							<option>option 02</option>
							<option>option 03</option>
							<option>option 04</option>
							<option>option 05</option>
							<option>option 06</option>
							<option>option 07</option>
							<option>option 08</option>
							<option>option 09</option>
							<option>option 10</option>
							<option selected>option 11</option>
							<option>option 12</option>
							<option>option 13</option>
							<option>option 14</option>
							<option>option 15</option>
							<option>option 16</option>
							<option>option 17</option>
							<option>option 18</option>
							<option>option 19</option>
							<option>option 20</option>
						</select>

<select class="styled" disabled>
							<option>option 01</option>
							<option>option 02</option>
							<option>option 03</option>
							<option>option 04</option>
						</select>

- css

body {margin:0;padding:100px 0 0;text-align:center;}
						button {border:0;outline:0;}

select {
							height:40px;
							padding:10px 10px 10px 13px;
							border:1px solid #dbdbdb;
							border-color:red;
							color:#000;
							font-size:14px;
						}

select.styled {
							overflow:hidden;
							height:0;
							padding:10px 10px 10px 13px;
							opacity:0;
						}
						.selBox select {
							display:none;
							position:fixed;
							top:-99999px;
							left:-99999px;
						}

.selBox {
							display:inline-block;
							position:relative;
							min-width:100px;
						}
						.selBox.on {z-index:50;}
						.selBox .btnSel {
							display:block;
							position:relative;
							z-index:5;
							width:100%;
							height:40px;
							padding:0 30px 0 15px;
							border:1px solid #dbdbdb;
							background-color:#fff;
							color:#000;
							text-align:left;
							font-size:14px;
							outline:0;
							transition:all .3s;
						}
						.selBox .btnSel:after {
							content:'';
							position:absolute;
							top:-1px;
							right:-1px;
							bottom:-1px;
							left:-1px;
							border:2px solid #ffde02;
							opacity:0;
						}
						/* hover */
						.selBox.on .btnSel {
							animation:btnSel .3s ease forwards;
						}
						@keyframes btnSel {
							0%,
							100% {
								transform:scale(1);
							}
							80% {
								transform:scale(1.03);
							}
						}

.selBox .btnSel:focus:after,
						.selBox.on .btnSel:after {opacity:1;}
						.selBox .btnSel:hover {border-color:#666;}

.selBox .btnSel:before {
							content:'';
							position:absolute;
							top:50%;
							right:12px;
							transform:rotate(45deg);
							width:8px;
							height:8px;
							margin-top:-6px;
							box-sizing:border-box;
							border-width:0 2px 2px 0;
							border-style:solid;
							border-color:#666;
							transition:all .3s;
						}

.selBox.disabled .btnSel {
							border-color:#e5e5e5;
							background-color:#fafafa;
							color:#999;
							cursor:default;
						}
						.selBox.disabled .btnSel:before {opacity:.6;}

/* on */
						.selBox.on .btnSel:before {
							border-width:2px 0 0 2px;
							margin-top:-2px;
						}
						.selBox .selLayer {
							overflow:hidden;
							overflow-y:auto;
							position:absolute;
							top:43px;
							left:0;
							width:100%;
							box-sizing:border-box;
							border:1px solid #ccc;
							background-color:#fff;
						}
						.selBox.btm .selLayer {
							top:inherit;
							bottom:43px;
						}
						.selBox .selLayer .option {
							display:block;
							width:100%;
							height:30px;
							padding:0 15px;
							background-color:transparent;
							color:#7b7b7b;
							text-align:left;
							font-size:14px;
							transition:background .3s, color .3s;
						}
						/* hover */
						.selBox .selLayer .option.on {
							color:#000;
							background-color:#fff8cc;
						}

.selBox .selLayer .option:hover {
							color:#000;
							background-color:#f5f8ff;
						}

.selBox .selLayer .option:disabled {
							background-color:#ccc;
						}

- script

$(window).on('load', function(){
							select();//셀렉트 초기 호출 함수 (중복호출 가능)

/* 셀렉트 포커스 */
							$(document).on('focus', 'select', function(){
								$(this).closest('.selBox').find('.btnSel').trigger('focus');
							});

/* 셀렉트레이어 열기 */
							$(document).on('click', '.selBox .btnSel', function(){
								var $selBox = $(this).closest('.selBox');

if(!$selBox.hasClass('disabled')){
									$('.selBox').not($selBox).removeClass('on').find('.selLayer').slideUp(100);
									if($selBox.hasClass('on')){
										$selBox.find('.selLayer').slideUp(100, function(){
											$selBox.removeClass('on');
										});
									}else{
										$selBox.addClass('on').find('.selLayer').slideDown(200);
										$selBox.find('.option.on').trigger('focus');
									}

var hei = $selBox.find('.option').outerHeight();
									var idx = $selBox.find('option:selected').index();
									$selBox.find('.selLayer').scrollTop(hei * (idx - 2));
								}
							});

/* 옵션 포커스 */
							$(document).on('focus click', '.selBox .option', function(e){
								$(this).addClass('on').siblings('.option').removeClass('on');

var idx = $(this).index();
								var $selBox = $(this).closest('.selBox');
								var chk = $(this).text();
								$selBox.find('.btnSel').html(chk);

//click 일 경우
								if(e.type == 'click'){
									//셀렉트박스 제어
									var selChk = $selBox.find('select option').eq(idx).html();
									$selBox.find('select').val(selChk).change();

selHide();
								}
							});

/* 옵션 선택 */
							$(document).on('click', '.selBox .option', function(){
								var idx = $(this).index();
								var chk = $(this).html();
								var $selBox = $(this).closest('.selBox');

$(this).addClass('on').siblings('.option').removeClass('on');
								$selBox.find('.btnSel').html(chk);
								selHide();

//셀렉트박스 제어
								var selChk = $selBox.find('select option').eq(idx).html();
								$selBox.find('select.styled option').eq(idx).attr('selected', true);
								$selBox.find('select').change();
							});

/* 옵션 선택 키보드 이벤트 */
							$(document).on('keydown', '.selBox .btnSel, .selBox .option', function(e){
								var $selBox = $(this).closest('.selBox');
								var $opt = $selBox.find('.option');
								var $optOn = $selBox.find('.option.on');
								var onIdx = $optOn.attr('idx') * 1;

//레이어 닫혀 있음
								if($(this).hasClass('btnSel')){
									if(!$selBox.hasClass('on')){
										if(e.keyCode == 38 || e.keyCode == 37){//위, 왼쪽
											$selBox.find('.option[idx=' + (onIdx - 1) + ']').trigger('click');
											return false;
										}
										if(e.keyCode == 40 || e.keyCode == 39){//아래, 오른쪽
											$selBox.find('.option[idx=' + (onIdx + 1) + ']').trigger('click');
											return false;
										}
									}
								}else{//레이어 열려 있음
									if(e.keyCode == 9){//탭키 비활성
										$selBox.find('.option.on').trigger('click');
										return false;
									}
									if(e.keyCode == 38){//위
										$selBox.find('.option[idx=' + (onIdx - 1) + ']').trigger('focus');
										return false;
									}
									if(e.keyCode == 40){//아래
										$selBox.find('.option[idx=' + (onIdx + 1) + ']').trigger('focus');
										return false;
									}
								}
							});

/* 다른곳 클릭시 셀렉트 닫기 */
							$(document).mouseup(function(e){
								var $selBox = $('.selBox, select');
								if(!$selBox.is(e.target) && $selBox.has(e.target).length === 0){
									selHide();
								}
							});

/* 셀렉트박스 (시스템) 클릭시 닫기 */
							$(document).on('click', 'select', function(){
								$('.selBox.on').find('.selLayer').slideUp(100, function(){
									$(this).closest('.selBox').removeClass('on');
								});
							});

/* ESC키로 셀렉트 닫기 */
							$(document).on('keyup', function(e){
								if(e.keyCode == 27){
									selHide();
								}
							});
						});

$(window).resize(function(){
							selArea();
						});

$(window).scroll(function(){
							selArea();
						});

/* 셀렉트 옵션 레이어 닫기 */
						function selHide(){
							$('.selBox.on').find('.selLayer').slideUp(100, function(){
								$(this).closest('.selBox').removeClass('on').find('.btnSel').trigger('focus');
							});
						}

/* 셀렉트 스타일 입히기 */
						function select(){
							$('select.styled').each(function(){
								$(this).closest('.selBox').find('.btnSel, .selLayer').remove();
								$(this).unwrap('.selBox');

$(this).attr('tabindex', '-1');

var chk = $(this).find('option:selected').html();
								var wid = $(this).outerWidth();
								if($(this).attr('disabled')){
									$(this).wrap('<div class="selBox disabled"></div>');
								}else{
									$(this).wrap('<div class="selBox"></div>');
								}

var $selBox = $(this).closest('.selBox');
								$selBox.css({'width':wid}).append('<button type="button" class="btnSel">' + chk + '</button><div class="selLayer" style="opacity:0;"></div>');

//옵션
								$(this).find('option').each(function(){
									var txt = $(this).html();
									var idx = $(this).index();
									var disLen = $(this).prevAll('option:disabled').length;
									var onIdx = $selBox.find('option:selected').index();
									$selBox.find('.selLayer').append('<button type="button" class="option" idx="' + (idx - disLen) + '">' + txt + '</button>');
									$selBox.find('.option').eq(onIdx).addClass('on');
								});

$(this).find('option:disabled').each(function(){
									var idx = $(this).index();
									$selBox.find('.option').eq(idx).prop('disabled', true).removeAttr('idx');
								});

//스크롤 생성
								var max = 10;//노출될 option 개수
								var len = $selBox.find('.option').length;
								var pdT = $selBox.find('.selLayer').css('paddingTop');
								var pdB = $selBox.find('.selLayer').css('paddingBottom');
								var turm = (pdT.replace('px', '') * 1) + (pdB.replace('px', '') * 1);
								var hei = $selBox.find('.option').outerHeight();

if(len > max){
									var layerW = $selBox.find('.selLayer').outerWidth();
									var idx = $selBox.find('option:selected').index();
									$selBox.find('.selLayer').css({'max-height':(hei * max) + turm, 'width':layerW + 17}).scrollTop(hei * (idx - 2));
								}

selArea();
							});
						}

/* 셀렉트 위치 감지 (레이어 열리는 방향) */
						function selArea(){
							$('.selBox').each(function(){
								var winT = $(window).scrollTop();
								var winH = $(window).height();
								var top = $(this).offset().top;
								var hei = $(this).outerHeight() + $(this).find('.selLayer').outerHeight();

if(winT + winH < top + hei){
									$(this).addClass('btm');
								}else{
									$(this).removeClass('btm');
								}
								$(this).removeClass('on').find('.selLayer').css({'opacity':'1'}).hide();
							});
						}

예제

코드

- html

- css

- script