表单美化-原生javascript和jQuery下拉列表(兼容IE6)

效果:

表单美化-原生javascript和jQuery下拉列表(兼容IE6)_第1张图片

思想:用其他标签配合脚本和隐藏的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>

你可能感兴趣的:(javascript学习,兼容IE,多选按钮,美化表单)