Html＆JQuery selectbox layer design
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-28 23:19
조회view: 12
본문
selectbox layer design
셀렉스박스 레이어 디자인
css로 셀렉트박스 디자인 변경하기
css
.select-hidden {display:none;visibility:hidden;padding-right:15px;}
.rev-select {display:inline-block;position:relative;width:240px;height:40px;color:#fff;cursor:pointer;}
.select-styled {position:absolute;left:0;right:0;top:0;bottom:0;padding:0 15px;line-height:40px;background:#222;}
.select-styled::after {content:"";position:absolute;width:0;height:0;top:18px;right:15px;border:5px solid transparent;border-color:#fff transparent transparent transparent;}
.select-styled:hover {background-color: #222;}
.select-styled:active,
.select-styled.active {background-color:#444;}
.select-styled.active::after {top:13px;border-color: transparent transparent #fff transparent;}
.select-options {display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;background:#222;z-index:9;}
.select-options li {margin:0;padding:12px 0px;text-indent:15px;border:solid 1px #222;}
.select-options li:hover {color:#ff9900;background:#444;}
.select-options li[rel="hide"] {display:none;}html
<select class="rev-select-box">
<option value="hide">Month</option>
<option value="january" rel="icon-temperature">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select class="rev-select-box">
<option value="hide">Year</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025" selected>2025</option>
</select>
<script type="text/javascript" src="<?php echo G5_URL; ?>/pages/js/selectbox.js"></script>