기본 select-option 태그에는 꾸밀 수 있는한계가 존재해요
근데 jquery와 ul-li div를 이용해서 아래처럼 만든다면 디자인을 마음대로 해줄 수 있어요
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
.select{ position:relative; line-height:normal; display:inline-block; *display:inline; vertical-align:middle; background:#fff; *zoom:1;}
.select *{ margin:0; padding:0; cursor:pointer; font-size:12px; font-family:Tahoma, Sans-serif;}
.select .myValue{ position:relative; z-index:2; left:0; top:0; border:1px solid #bababa; color:#666; line-height:19px; _line-height:normal; text-align:left; overflow:visible; background:transparent;}
.select .myValue.selected{ font-weight:bold;}
.select .myValue{ height:21px; width:100%; text-indent:5px; *text-indent:0; *padding-left:5px;}
.select .ctrl{ position:absolute; top:0; right:0; width:18px; height:19px; border:1px solid #bababa; border-left:1px solid #eaeaea; background:#fff;}
.select .arrow{ position:absolute; width:0; height:0; top:9px; right:6px; line-height:0; font-size:0; border-top:3px solid #999; border-left:3px solid #fff; border-right:3px solid #fff;}
.select ul{ top:20px; left:0; width:100%; list-style:none; border:0; border-top:1px solid #bababa; border-bottom:1px solid #bababa; background:#fff; overflow:hidden;}
.select ul.aList{ display:none;}
.select li{ position:relative; overflow:hidden; white-space:nowrap; height:18px; border-left:1px solid #bababa; border-right:1px solid #bababa;}
.select li a{ display:block; text-indent:8px; *text-indent:6px; height:18px; line-height:18px; color:#767676; background:#fff; text-decoration:none;}
.select li:hover *{ background:#999; color:#fff;}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div class="select" style="width:200px;">
<span class="ctrl"><span class="arrow"></span></span>
<div class="myValue selected">FAMILY SITE</div>
<ul class="aList" style="position: absolute;">
<li><a href="http://google.com">GOOGLE</a></li>
<li><a href="http://naver.com">NAVER</a></li>
</ul>
</div>
<script>
$('.select').click(function(){
if( $(".aList").css("display")=="none" ) {
$('.aList').css({"display":"block" });
}
else {
$('.aList').css({"display":"none" });
}
});
</script>
</body>
</html>
'Web(html css php)' 카테고리의 다른 글
| CSS 선택자의 종류 및 간단한 효과주기 (0) | 2014.10.23 |
|---|---|
| php str_replace (문자열 치환 함수) (0) | 2014.10.20 |
| html 스크롤 (0) | 2014.10.15 |
| CSS 핵 (IE6, IE7 문제해결) (0) | 2014.10.15 |
| html 웹 구글 맵 서비스 (0) | 2014.10.10 |
댓글