表单美化-原生javascript和jQuery单选按钮（兼容IE6）
2014-10-24 09:47
661 查看
最近很多人问怎么美化表单的元素，大家都知道表单元素在各个浏览器中的表现不一，反正也是特别的丑，那么问题就来了，我们能自己设计表单元素的外观么？答案是可以的，现在我们就来试试吧。我们用两种方式来实现这一效果，一种是用原生的javascript 和一种是现在特别流行的javascript框架jQuery来实现这一效果。
首先我们先来用javascript的方式，不了解原生javascript的童鞋可以跳过这个直接进去jQuery的部分。javascript是前端的基础建议大家还是要学习下原生javascript。
我们的想法是：利用单选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式，就是说用什么的样式是由按钮的状态来决定。
1：原生javascript美化单选按钮 （代码测试我用了IE5+，现代浏览器就不用说了是可以的，就IE有8以前有点奇葩。）
我们采取的是把原来的表单元素的透明度改为0，或者直接display：none掉然后添加标签配合脚本模拟点击效果。
下面直接给出demo 童鞋们直接复制就好
用到的图片
效果
现在我们来完善下代码，增加不能点击功能
效果
2：jQuery美化单选按钮 （代码测试我用了IE5+，现代浏览器就不用说了是可以的，就IE有8以前有点奇葩。）
用jQuery做的代码简洁了许多，有木有。。。。效果和上面一致
来吧亲，既然用到了JQ那么我们现在就来简化下代码，是它可以更好的重用吧。
现在我们把代码做最后的一次简化最终效果如下
代码下载
首先我们先来用javascript的方式，不了解原生javascript的童鞋可以跳过这个直接进去jQuery的部分。javascript是前端的基础建议大家还是要学习下原生javascript。
我们的想法是：利用单选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式，就是说用什么的样式是由按钮的状态来决定。
1：原生javascript美化单选按钮 （代码测试我用了IE5+，现代浏览器就不用说了是可以的，就IE有8以前有点奇葩。）
我们采取的是把原来的表单元素的透明度改为0，或者直接display：none掉然后添加标签配合脚本模拟点击效果。
下面直接给出demo 童鞋们直接复制就好
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;}
</style>
<script type="text/javascript">
function show(index){ /*定义一个函数*/
var tyle=document.getElementById("tyle"); /*获取ID为tyle的元素*/
var label=tyle.getElementsByTagName("label"); /*通过ID为tyle的元素获取下面的所有label元素，注意了返回的是包含所有label元素的数组*/
// 我们要访问每个label元素那么就要遍历
for(var i=0;i<label.length;i++){
if(i==index){ /*判断当前的i和传进来的参数是否相等 */
label[i].className="checked";/*相等的话 就给类*/
}else{label[i].className=null;} /*不是的话 类为空*/
}
}
</script>
<body>
<div id="tyle">
<form action="#">
<label for="man" class="checked" onclick="show(0)"> <!-- 当这个label元素被点击的时候调用show()这个函数并且传参0 以便函数确认点击谁 -->
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked>男
</label>
<label for="woman" onclick="show(1)">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" onclick="show(2)">
<span class="coin"></span>
<input type="radio" id="man-woman" value="man-woman" name="radtype">
不男不女
</lable>
</form>
</div>
</body>
</html>用到的图片
效果
现在我们来完善下代码，增加不能点击功能
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;}
.disabled .coin{background-position: 0 -90px;}
</style>
<script type="text/javascript">
function show(index){ /*定义一个函数*/
var tyle=document.getElementById("tyle"); /*获取ID为tyle的元素*/
var label=tyle.getElementsByTagName("label"); /*通过ID为tyle的元素获取下面的所有label元素，注意了返回的是包含所有label元素的数组*/
// 我们要访问每个label元素那么就要遍历
for(var i=0;i<label.length;i++){
if(i==index){ /*判断当前的i和传进来的参数是否相等 */
label[i].className="checked";/*相等的话 就给类*/
}else{
if(label[i].className=="disabled"){ // 再判断一下当前的label是否有disabled这个类
label[i].className="disabled" //如果有的话 就保持这个类
}else{label[i].className=null;} //否则就清空类
} /*不是的话 类为空*/
}
}
</script>
<body>
<div id="tyle">
<form action="#">
<label for="man" class="checked" onclick="show(0)"> <!-- 当这个label元素被点击的时候调用show()这个函数并且传参0 以便函数确认点击谁 -->
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked>男
</label>
<label for="woman" onclick="show(1)">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="disabled"> //增加一个不能点击的元素
<span class="coin"></span>
<input type="radio" id="man-woman" disabled value="man-woman" name="radtype">
不男不女
</lable>
</form>
</div>
</body>
</html>效果
2：jQuery美化单选按钮 （代码测试我用了IE5+，现代浏览器就不用说了是可以的，就IE有8以前有点奇葩。）
用jQuery做的代码简洁了许多，有木有。。。。效果和上面一致
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;}
.disabled .coin{background-position: 0 -90px;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#tyle label").click(function() { /*为ID为tyle里面的所有label绑定点击事件*/
$(this).not('.disabled').addClass('checked').siblings().not('.disabled').removeClass('checked');
/*当前被点击的label并且里面没有类disabled的就增加类checked和它的前后兄弟关系的label并且不含有类disabled的label都移除类checked*/
});
})
</script>
<body>
<div id="tyle">
<form action="#">
<label for="man" class="checked" >
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked>男
</label>
<label for="woman">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="disabled">
<span class="coin"></span>
<input type="radio" id="man-woman" disabled value="man-woman" name="radtype">
不男不女
</lable>
</form>
</div>
</body>
</html>来吧亲，既然用到了JQ那么我们现在就来简化下代码，是它可以更好的重用吧。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
label{position: relative;padding-left: 10px;margin-left: 20px;}
label input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.checked .coin{background-position: -60px -30px;}
.disabled .coin{background-position: 0 -90px;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
function showRadio(){
if($(".radioList").length){ /*每次执行函数showRadio()的时候判断下时候有.radioList（长度不为0即有.radioList）*/
$(".radioList").each( function() { /*.radioList每次执行方法 showRadio()都把每个.radioList遍历下每个.radioList都执行.checked移除*/
$(this).removeClass('checked')
});
$(".radioList input[type='radio']:checked").each( function() { /*每次执行showRadio()都把选中的按钮删选出来并把所有选出来的按钮的父label标签增加.checked*/
$(this).parent('label').addClass('checked');
});
$(".radioList input[type='radio']:disabled").each( function() { /*每次执行showRadio()都把不能选择的按钮删选出来并把所有选出来的按钮的父label标签增加.disabled*/
$(this).parent('label').addClass('disabled');
});
}
}
$(function(){
$(".radioList").click(function() { /*任何一个.radioList被点击的时候执行 showRadio()*/
showRadio();
});
showRadio(); /*页面载入的时候执行showRadio()*/
})
</script>
<body>
<form action="#">
<label for="man" class="radioList">
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked="checked">男
</label>
<label for="woman" class="radioList">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="radioList">
<span class="coin" class="radioList"></span>
<input type="radio" id="man-woman" disabled="disabled" value="man-woman" name="radtype">
不男不女
</lable>
</form>
</body>
</html>现在我们把代码做最后的一次简化最终效果如下
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.radioList .coin{background: url(radio.png) no-repeat -90px 0;width: 20px;height: 20px;display: inline-block;position: absolute;left: 0;top: 0;} /* 然后我们自己定义按钮图片 */
.radioList{position: relative;padding-left: 10px;margin-left: 20px;}
.radioList input{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);opacity: 0;} /* 把原来的按钮透明度改为0 使它隐藏不见 */
.radio_checked .coin{background-position: -60px -30px;}
.radio_disabled .coin{background-position: 0 -90px;}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
var radio_parent=".radioList";
var radio_input=radio_parent+" input[type='radio']";
var checked_radio_css="radio_checked";
var disabled_radio_css="radio_disabled";
function showRadio(){
if($(radio_parent).length){ /*每次执行函数showRadio()的时候判断下时候有.radioList（长度不为0即有.radioList）则执行里面的代码*/
$(radio_parent).each( function() { /*第一步每个.radioList里的样式（.checked）移除一下*/
$(this).removeClass(checked_radio_css)
});
$(radio_input+":checked").each( function() { /*第二步把.radioList里选中的按钮筛选出来并把所有选出来的按钮的父label标签增加.checked*/
$(this).parent(radio_parent).addClass(checked_radio_css);
});
$(radio_input+":disabled").each( function() { /*第三步把radioList里不能选择的按钮删选出来并把所有选出来的按钮的父label标签增加.disabled*/
$(this).parent(radio_parent).addClass(disabled_radio_css);
});
}
}
$(function(){
$(radio_parent).click(function() { /*任何一个.radioList被点击的时候执行 showRadio()*/
showRadio();
});
showRadio(); /*页面载入的时候执行showRadio()*/
})
</script>
<body>
<form action="#">
<label for="man" class="radioList">
<span class="coin"></span>
<input type="radio" id="man" value="man" name="radtype" checked="checked">男
</label>
<label for="woman" class="radioList">
<span class="coin"></span>
<input type="radio" id="woman" value="woman" name="radtype">女
</label>
<label for="man-woman" class="radioList">
<span class="coin" class="radioList"></span>
<input type="radio" id="man-woman" disabled="disabled" value="man-woman" name="radtype">
不男不女
</lable>
</form>
</body>
</html>代码下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 表单美化-原生javascript和jQuery多选按钮（兼容IE6）
- 表单美化-原生javascript和jQuery下拉列表（兼容IE6）
- JavaScript/jQuery 表单美化插件小结
- JavaScript/jQuery 表单美化插件
- 表单样式美化--复选框和单选按钮
- 美化表单——自定义单选按钮和复选按钮
- 美化表单——自定义单选按钮和复选按钮
- JavaScript/jQuery 表单美化插件小结
- 拖动控件 javascript原生，兼容IE6-11、chrome、firefox、Opera、Safari
- JavaScript/jQuery 表单美化插件小结
- 表单按钮倒计时 》验证码 jQuery&&JavaScript
- JavaScript/jQuery 表单美化插件
- JavaScript/jQuery 表单美化插件小结
- jQuery扁平化单选按钮和复选框美化插件
- 用jquery获取提交了的表单的单选按钮的值呢?
- JavaScript/jQuery 表单美化插件小结
- 使用原生JavaScript获取单选按钮radio的选中值
- 利用label标签和CSS美化文件上传表单(不兼容IE6)
- Firefox兼容的JavaScript回车提交表单
- javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”