當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
表单美化-原生javascript和jQuery下拉列表（兼容IE6）
生活随笔
收集整理的這篇文章主要介紹了
表单美化-原生javascript和jQuery下拉列表（兼容IE6）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果：
思想：用其他標簽配合腳本和隱藏的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>
轉載于:https://www.cnblogs.com/xiaominwu/p/4348041.html
總結
以上是生活随笔為你收集整理的表单美化-原生javascript和jQuery下拉列表（兼容IE6）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何理解c和c ++的复杂类型声明 (转
- 下一篇： gradle idea java ssm