selcet처럼 css 디자인입히기

<script type=text/javascript src="http://code.jquery.com/jquery-latest.js" jQuery="87"></script>

<script type=text/javascript jQuery="88">
jQuery(function($){
 
 // Common
 var select_root = $('div.select');
 var select_value = $('.my_value');
 var select_a = $('div.select>ul>li>a');
 var select_input = $('div.select>ul>li>input[type=radio]');
 var select_label = $('div.select>ul>li>label');
 
 // Radio Default Value
 $('div.my_value').each(function(){
  var default_value = $(this).next('.i_list').find('input[checked]').next('label').text();
  $(this).append(default_value);
 });
 
 // Line
 select_value.bind('focusin',function(){$(this).addClass('outLine')});
 select_value.bind('focusout',function(){$(this).removeClass('outLine')});
 select_input.bind('focusin',function(){$(this).parents('div.select').children('div.my_value').addClass('outLine')});
 select_input.bind('focusout',function(){$(this).parents('div.select').children('div.my_value').removeClass('outLine')});
 
 // Show
 function show_option(){
  $(this).parents('div.select:first').toggleClass('open');
 }
 
 // Hover
 function i_hover(){
  $(this).parents('ul:first').children('li').removeClass('hover');
  $(this).parents('li:first').toggleClass('hover');
 }
 
 // Hide
 function hide_option(){
  var t = $(this);
  setTimeout(function(){
   t.parents('div.select:first').removeClass('open');
  }, 1);
 }
 
 // Set Input
 function set_label(){
  var v = $(this).next('label').text();
  $(this).parents('ul:first').prev('.my_value').text('').append(v);
  $(this).parents('ul:first').prev('.my_value').addClass('selected');
 }
 
 // Set Anchor
 function set_anchor(){
  var v = $(this).text();
  $(this).parents('ul:first').prev('.my_value').text('').append(v);
  $(this).parents('ul:first').prev('.my_value').addClass('selected');
 }

 // Anchor Focus Out
 $('*:not("div.select a")').focus(function(){
  $('.a_list').parent('.select').removeClass('open');
 });

 select_value.click(show_option);
 select_root.removeClass('open');
 select_root.focus(function(){$(this).removeClass('open')});
 select_a.click(i_hover).focus(i_hover).hover(i_hover);
 select_input.focus(set_label);
 select_label.click(hide_option);
});

 //select_value.click(show_option);
 //select_root.removeClass('open');
 // select_root.mouseleave(function(){$(this).removeClass('open')});
 //select_a.click(set_anchor).focus(i_hover).hover(i_hover);
 //select_input.change(set_label).focus(set_label);
 //select_label.hover(i_hover).click(hide_option);
 //});
</script>

<style>
.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 p.my_value{ width:100%; height:21px; *padding-left:5px; text-indent:5px; *text-indent:0}
.select div.my_value{ height:19px; text-indent:8px}
.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}
</style>

<div style="width:200px" class="select" jQuery="1" sizcache="0" sizset="0">
<p class="my_value" jQuery="1">select link</p> 
 <ul class="a_list" jQuery="1" sizcache="0" sizset="0">
  <li jQuery="1" sizcache="0" sizset="0"><a href="#1" jQuery="1">link_1</a></li>
  <li jQuery="2" sizcache="0" sizset="1"><a href="#2" jQuery="2">link_2</a></li>
  <li jQuery="3" sizcache="0" sizset="2"><a href="#3" jQuery="3">link_3</a></li>
 </ul>
</div>