[jquery] select 셀렉트박스 모양꾸미기

1312811251.zip

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

<script src="js/jquery.csf.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

  $('#demo01').customSelectForm({icon:true});    // 클릭시 원형아이콘 생성유

  $('.demo02').customSelectForm();

});

</script>

여기 id값이 select에 있어야한다.

<select id="demo01" name="customSelectForm">

  <option value="1" title="img/demo01/icon/01.png">Rhum</option>

  <option value="2" title="img/demo01/icon/01.png">Whisky</option>

  <option value="3" title="img/demo01/icon/01.png">Champagne</option>

  <option value="4" title="img/demo01/icon/01.png" selected="selected">Vin</option>

  <option value="5" title="img/demo01/icon/01.png">Bières</option>

</select>

<!-- /CUSTOM SELECT -->

<hr />

<!-- CUSTOM SELECT DEMO 02 -->

<select class="demo02" name="customSelectForm">

  <option value="1" selected="selected">10</option>

  <option value="2">20</option>

  <option value="3">30</option>

  <option value="4">40</option>

  <option value="5">50</option>

</select>

출처입니다.

원본입니다.