文章出處
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0}
.selectList{width: 500px;margin: 50px auto;display: block;width: 320px;}
.selectValue{position: relative;height: 40px;border: 5px solid #00b0c6;padding-left: 10px;}
.valueCon{display: inline-block;width: 100%;height: 40px;line-height: 40px;}
.selectValue i{background: url(select.png) no-repeat;height: 18px;width: 22px;display: inline-block;position: absolute;right: 11px; top: 12px;}
.onclick_i{background-position: 0 -14px !important;}
.selectCon{list-style: none;line-height: 25px;border: 1px #ccc solid;display: none}
.selectCon li{padding-left: 15px;cursor: pointer;}
.block{display: block}
.selectCon li:hover{color: #00b0c6;transition: all 0.4s ease 0s;background: #ccc;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".selectCon li").click(function(event) {
$(".valueCon").text($(this).text());
$(".selectValue input").val($(this).text())
$(".selectCon").toggleClass('block');
$(".selectValue i").toggleClass('onclick_i');
});
$(".valueCon").click(function(event) {
$(this).siblings('i').toggleClass('onclick_i').parents('.selectList').find('.selectCon').toggleClass('block');
});
})
</script>
</head>
<body>
<form action="#">
<label class="selectList">
<div class="selectValue">
<span class="valueCon">fdgfd</span>
<input type="hidden" value="請輸入名稱" >
<i></i>
</div>
<ul class="selectCon">
<li>200 Q</li>
<li>300 Q</li>
<li>400 Q</li>
<li>500 Q</li>
<li>600 Q</li>
<li>700 Q</li>
<li>800 Q</li>
</ul>
</label>
</form>
</body>
</html>
文章列表
效果：
思想：用其他標簽配合腳本和隱藏的input并通過傳值模擬表單元素中的select
<!DOCTYPE HTML>
<html lang="en-US"><head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0}
.selectList{width: 500px;margin: 50px auto;display: block;width: 320px;}
.selectValue{position: relative;height: 40px;border: 5px solid #00b0c6;padding-left: 10px;}
.valueCon{display: inline-block;width: 100%;height: 40px;line-height: 40px;}
.selectValue i{background: url(select.png) no-repeat;height: 18px;width: 22px;display: inline-block;position: absolute;right: 11px; top: 12px;}
.onclick_i{background-position: 0 -14px !important;}
.selectCon{list-style: none;line-height: 25px;border: 1px #ccc solid;display: none}
.selectCon li{padding-left: 15px;cursor: pointer;}
.block{display: block}
.selectCon li:hover{color: #00b0c6;transition: all 0.4s ease 0s;background: #ccc;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".selectCon li").click(function(event) {
$(".valueCon").text($(this).text());
$(".selectValue input").val($(this).text())
$(".selectCon").toggleClass('block');
$(".selectValue i").toggleClass('onclick_i');
});
$(".valueCon").click(function(event) {
$(this).siblings('i').toggleClass('onclick_i').parents('.selectList').find('.selectCon').toggleClass('block');
});
})
</script>
</head>
<body>
<form action="#">
<label class="selectList">
<div class="selectValue">
<span class="valueCon">fdgfd</span>
<input type="hidden" value="請輸入名稱" >
<i></i>
</div>
<ul class="selectCon">
<li>200 Q</li>
<li>300 Q</li>
<li>400 Q</li>
<li>500 Q</li>
<li>600 Q</li>
<li>700 Q</li>
<li>800 Q</li>
</ul>
</label>
</form>
</body>
</html>
文章列表
全站熱搜
留言列表
