[제이쿼리] 셀렉트박스 디자인

jquery-1.11.1.min.js

select.html

CSS

.select{ display:inline-block; *display:inline; position:relative; background:#fff; line-height:normal; vertical-align:middle; *zoom:1}
.select *{ margin:0; padding:0; font-size:12px; font-family:Tahoma, Sans-serif; cursor:pointer}
.select .my_value{ overflow:visible; position:relative; top:0; left:0; z-index:2; border:1px solid #bababa; background:transparent; color:#666; text-align:left; line-height:19px; _line-height:normal}
.select .my_value.selected{ font-weight:bold}
.select.open .my_value,
.select .my_value.outLine{ border:1px solid #999;}
.select button.my_value{ width:100%; height:21px; *padding-left:5px; text-indent:5px; *text-indent:0}
.select div.my_value{ height:19px; text-indent:8px; padding-right:30px;}
.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; border-top:3px solid #999; border-left:3px solid #fff; border-right:3px solid #fff; font-size:0; line-height:0}
.select ul{ overflow:hidden; position:absolute; top:20px; left:0; width:100%; border:0; border-top:1px solid #bababa; border-bottom:1px solid #bababa; background:#fff; list-style:none}
.select ul.a_list{ display:none}
.select.open ul.a_list{ display:block}
.select ul.i_list{ left:-2000%}
.select.open ul.i_list{ left:0}
.select li{ overflow:hidden; position:relative; height:18px; border-left:1px solid #bababa; border-right:1px solid #bababa; white-space:nowrap}
.select li input.option{ position:absolute; width:100%; height:20px; line-height:20px}
.select li label{ position:absolute; top:0; left:0; width:100%; height:18px; background:#fff; color:#767676; line-height:18px; text-indent:8px; *text-indent:6px}
.select li a{ display:block; height:18px; background:#fff; color:#767676; line-height:18px; text-indent:8px; *text-indent:6px; text-decoration:none}
.select li.hover *{ background:#999; color:#fff}
.select_go{ overflow:visible; height:21px; width:28px; *margin:-1px 0 -1px 4px; padding:0; border:1px solid #bababa; background:#eee; font:bold 11px Tahoma; color:#767676; line-height:19px; _line-height:normal; vertical-align:middle; cursor:pointer}

html

/* 링크형 */

	
	
	

	
Link_1
	
Link_2
	
Link_3
	


	
	
	

	
Link_1
	
Link_2
	
Link_3
	


/* 폼용 */

	

		
Legend
		

			
			

			

				
Select Option2
				
Option_1
				
Option_2
				
Option_3
			
		
	

javascript