크롬의 대항마(?) 오파시티 브라우저 for macOS
2024-05-18
IE8 이상의 브라우저에서 동일하게 보이는 Select Box 디자인하기
2014-03-08
Explanation
간단하게 만들어보는 Select Box, IE8 에서도 동일한 효과를 줄 수 있다.
예제 링크 : https://falsy.me/preview/select/select.html
소스 보기
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[HTML] <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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
[CSS] div#select_box { position: relative; width: 200px; height: 40px; background: url(select_arrow.png) 180px center no-repeat; /* 화살표 이미지 */ border: 1px solid #E9DDDD; } div#select_box label { position: absolute; font-size: 14px; color: #a97228; top: 13px; left: 12px; letter-spacing: 1px; } div#select_box select#color { width: 100%; height: 40px; min-height: 40px; line-height: 40px; padding: 0 10px; opacity: 0; filter: alpha(opacity=0); /* IE 8 */ } |
|
1 2 3 4 5 6 7 8 9 10 11 |
[JAVASCRIPT] jQuery(document).ready(function(){ var select = $("select#color"); select.change(function(){ var select_name = $(this).children("option:selected").text(); $(this).siblings("label").text(select_name); }); }); |
