JQuery+JavaScript Jquery+css selectbox
페이지 정보
- 작성자후야
- 조회 : 201
- 작성일 : 2021-01-28 00:24
본문
CSS를 Jquery 이용한 Selectbox(셀렉트박스) 디자인
<style>
/* css */
.select {display:block;position:relative;width:100%;height:40px;line-height:40px;/*text-transform:uppercase;*/border:1px solid #ccc;background:#fff;}
.select label {display:block;position:absolute;top:0;left:0;width:100%;padding:0;color:#666;font-weight:300;line-height:40px;text-indent:10px;}
.select label:after{position:absolute;top:0;right:0;width:38px;height:38px;padding:0;content:'';font-size:13px;color:#444;text-align:center;background:url(../img/ico-select.png) no-repeat 50% 50% #fff;}
.select select {display:block;width:100%;height:40px;opacity:0;filter:alpha(opacity=0);-ms-filter:alpha(opacity=0)/* IE 8 */;}
</style>
/* html */
<span class="select" id="">
<label for="selectbox">선택</label>
<select name="selectbox" id="selectbox">
<option value="">Html</option>
<option value="">CSS</option>
<option value="">Jquery</option>
<option value="">PHP</option>
</select>
</span>
<script>
/* script */
$(document).ready(function() {
var select = $('.select select');
select.change(function(){
var select_name = $(this).children('option:selected').text();
$(this).siblings("label").text(select_name);
});
var val = $("#셀렉트박스ID option:selected").text();
$('.select select').siblings("label").text(val);
});
</script>
- 이전글시/도, 구/군 배열 2021.01.30
- 다음글TouchSwipe a jQuery plugin for touch devices 2021.01.28