셀렉트박스 selectbox 디자인변경 ..jquery
<!DOCTYPE html> <html lang="ko"> <head> <title>Select Box - CSS</title> <style> div#select_box { position: relative; width: 200px; height: 25px; background: url(http://cheolguso.com/preview/select/select_arrow.png) 180px center no-repeat; border: 1px solid #E9DDDD; } div#select_box label { position: absolute; font-size: 12px; color: #a97228; top: 7px; left: 12px; letter-spacing: 1px; } div#select_box select#color,select#size { width: 100%; height: 25px; min-height: 25px; line-height: 25px; padding: 0 10px; opacity: 0; filter: alpha(opacity=0); } </style> </head> <body> <div id="select_box"> <label for="color">color</label> <select id="color" title="select color"> <option selected="selected">color</option> <option>red</option> <option>blue</option> <option>yellow</option> <option>black</option> </select> </div> <p> <div id="select_box"> <label for="size">size</label> <select id="size" title="select color"> <option selected="selected">color</option> <option>large</option> <option>middle</option> <option>small</option> <option>x-large</option> </select> </div> <p> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> jQuery(document).ready(function(){ var select = $("select#color,select#size"); select.change(function(){ var select_name = $(this).children("option:selected").text(); $(this).siblings("label").text(select_name); }); }); </script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> <script> $(function() { $( "#datepicker,#datepicker2" ).datepicker({ changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', autoSize: false, monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'], dayNamesMin: ['일','월','화','수','목','금','토'], showMonthAfterYear: true //년 뒤에 월 표시 }); }); </script> <style> .ui-datepicker {width:190px; font-size:10px} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 50%; font-size:10px; } </style> <input type="text" id="datepicker" name="ser_sdate" style="cursor:hand;text-align:center;width:198px;height:20px; border: 1px solid #E9DDDD; padding-top:4px" value="" readonly> </body> </html>
