[javascript] select box css 디자인

[javascript] select box css 디자인

select box를 css로 디자인하는 부분은 생각보다 쉽지 않습니다. select는 어떻게든 디자인한다고 하지만

 option 부분과 select의 화살표까지 디자인을 생각하다보면 까다롭다고 느끼게 되기 마련인데요. 

 오늘은 select box를 보다 이쁘게 디자인할 수 있을 만한 방법을 알아보도록 하겠습니다.

이번 예제에서는 화살표 이미지가 필요합니다. 화살표 이미지를 만드시거나 아래에서 다운받아주세요. 

arrow.zip

</head> 안에 제이쿼리 스크립트를 넣어주신 후, html에  소스를 넣어주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<div class="selectbox">
	<dl class="dropdown">
		<dt><a href="#" style="padding-top:4px;"><span>신상품순</span></a></dt>
		<dd>
			<ul class="dropdown2">
				<li><a href="#">신상품순</a></li>
				<li><a href="#">인기상품순</a></li>
				<li><a href="#">낮은가격순</a></li>
				<li><a href="#">높은가격순</a></li>
			</ul>
		</dd>
	</dl>
</div>

그 다음, css로 디자인을 꾸며줍니다.

.desc { color:#e8e8e8;}
.desc a {color:#515151;}
.dropdown {width:103px;margin:0px;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color:#3b3b3b; text-decoration:none; outline:none;}
.dropdown a:hover { color:#3b3b3b;}
.dropdown dt a:hover { color:#3b3b3b; border: 1px solid #9e9e9e;}
.dropdown dt a {background:#fff url('화살표이미지') no-repeat scroll right center; display:block; padding-right:20px;
border:1px solid #9e9e9e; width:82px;height:33px;}
.dropdown dt a span {cursor:pointer; display:block;line-height:29px;padding-left:10px;}
.dropdown dd ul { background:#fff none repeat scroll 0 0; border:1px solid #9e9e9e; color:#515151; display:none;
left:0px; padding:5px 0px; position:absolute; top:-1px; width:auto; min-width:102px; list-style:none; text-align:left;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;padding-left:11px;}
.dropdown dd ul li a:hover { background-color:#e8e8e8;}
.dropdown img.flag { border:none; vertical-align:middle;padding:11px;}
.flagvisibility { display:none;}

마지막으로 스크립트를 넣어주세요.

$(".dropdown img.flag").addClass("flagvisibility");

$(".dropdown dt a").click(function() {
$(".dropdown dd ul").toggle();
});
	
$(".dropdown dd ul li a").click(function() {
var text = $(this).html();
$(".dropdown dt a span").html(text);
$(".dropdown dd ul").hide();
/* $("#result").html("Selected value is: " + getSelectedValue("sample"));*/
});
	
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (! $clicked.parents().hasClass("dropdown"))
$(".dropdown dd ul").hide();
});

$(".dropdown img.flag").toggleClass("flagvisibility");

참고 : http://jsfiddle.net/c2ezuw24/1/