表单美化-原生javascript和jQuery下拉列表（兼容IE6）
2014-10-30 10:42
176 查看
效果：
思想：用其他标签配合脚本和隐藏的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>
思想：用其他标签配合脚本和隐藏的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和jQuery多选按钮（兼容IE6）
- 表单美化-原生javascript和jQuery单选按钮（兼容IE6）
- 如何利用javascript获取表单中select下拉列表中所选中项的值value
- JavaScript/jQuery 表单美化插件小结
- JavaScript/jQuery 表单美化插件小结
- 表单美化——下拉列表
- 用JavaScript来美化HTML的select标签的下拉列表效果
- [置顶] 自己动手丰衣足食之表单美化checkbox和radio和下拉列表
- 拖动控件 javascript原生，兼容IE6-11、chrome、firefox、Opera、Safari
- jQuery下拉美化搜索表单效果代码分享
- jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡
- 利用label标签和CSS美化文件上传表单(不兼容IE6)
- JavaScript/jQuery 表单美化插件
- JavaScript/jQuery 表单美化插件小结
- 用JavaScript来美化HTML的select标签的下拉列表效果
- jQuery下拉美化搜索表单效果代码分享
- 一个非常好用的jquery 操作表单下拉列表select 插件
- JavaScript/jQuery 表单美化插件小结
- 解决discuz与jquery不兼容问题——下拉列表不能用(Uncaught TypeError: Cannot set property 'position' of undefined)
- JavaScript/jQuery 表单美化插件小结