디자인천일공책

Html＆JQuery selectbox with xeicon

페이지 정보

작성자 디자인천일 작성일Date: 2025-03-27 20:41 조회view: 5

본문

selectbox with xeicon


css를 이용한 셀렉트박스 디자인

css

/* select */
.select {position:relative;}
.select select {display:block;width:100%;height:var(--h);padding:0 10px;background:#fff;border:var(--bdr);border-radius:var(--radius);cursor:pointer;outline:none;
-webkit-appearance: none;
appearance: none;
}
.select select:focus {}
.select::after {content:"\e941";display:block;position:absolute;right:16px;top:0px;height:var(--h);font-family:"xeicon";font-size:14px;text-align:center;line-height:var(--h);background:none;z-index:1;cursor:pointer;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
pointer-events:none;
}
.select.selected:after {color:#ff7700;
-webkit-transform:rotate(-180deg);
transform:rotate(-180deg);
}

html

<span class="select">
<select name="" id="">
	<option value="">...</option>
	<option value="">...</option>
	<option value="">...</option>
</select>
</span>

jQuery/Javascript

//select
	$(".select").click(function() {
		$(this).addClass('selected');
		return false;
	});
	
	$(".select").mouseleave(function() {
		$(this).removeClass('selected');
		return false;
	});