最近很多人问怎么美化表单的元素，大家都知道表单元素在各个浏览器中的表现不一，反正也是特别的丑，那么问题就来了，我们能自己设计表单元素的外观么？答案是可以的，现在我们就来试试吧。我们用两种方式来实现这一效果，一种是用原生的javascript 和一种是现在特别流行的javascript框架jQuery来实现这一效果。

首先我们先来用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）的更多相关文章

  1. 表单美化-原生javascript和jQuery多选按钮（兼容IE6）

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

  2. 表单美化-原生javascript和jQuery下拉列表（兼容IE6）

    效果: 思想:用其他标签配合脚本和隐藏的input并通过传值模拟表单元素中的select <!DOCTYPE HTML> <html lang="en-US"&g ...

  3. JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://w ...

  4. 推荐几款很棒的 JavaScript 表单美化和验证插件

    表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...

  5. jQuery星级评论表单美化代码

    最近正在做php第二阶段的项目,由于我们小组做的是游戏评论网站,所以需要用到评分评论的页面,这里我做了个星级评论表单 1.首先,我们需要引入一个jQuery文件,代码如下: /*! * jQuery ...

  6. jQuery和CSS3超酷表单美化插件

     这是一款效果很精美炫酷的jQuery和CSS3联系方式表单美化插件.大多数站点上都有让用户填写的联系方式表单,一个设计良好的表单可以大大的提升用户的体验度.该表单美化插件在原生HTML表单的基础上进 ...

  7. HTML5——表单美化

    闲聊: 今天小颖在跟着慕课网学习:表单美化 看完了自己跟着敲了敲,顺便做个笔记嘻嘻,好记性不如烂笔头,脑子记不住,就写成笔记,以后也方便查看,嘻嘻. 正文: 1.表单美化_单选按钮篇 2.表单美化_复 ...

  8. BootStrapt iCheck表单美化插件使用方法详解（含参数、事件等） 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  9. iCheck表单美化插件使用方法详解（含参数、事件等）

    iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

随机推荐

  1. fprintf 读入%s,要注意

    eg  文件内容faninfd 14   "%s %d",会把整行内容放到%s 而%d是乱码 ps: 文件内容是 1,2,3    “%d,%d,%d” 文件内容是1:2:3   ...

  2. Educational Codeforces Round 13 D：Iterated Linear Function（数论）

    http://codeforces.com/contest/678/problem/D D. Iterated Linear Function Consider a linear function f ...

  3. ACM题目————最短路径问题

    Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的. Input 输入n,m,点 ...

  4. css 前景色与背景色

    前景色:color:#990000; 背景色:background-color:red; 可以用来设置文字的前景色与背景色 <!-- 作者:纤锐出处:http://www.cnblogs.com ...

  5. 周赛-DZY Loves Chessboard 分类： 比赛 搜索 2015-08-08 15:48 4人阅读 评论(0) 收藏

    DZY Loves Chessboard time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. GUI_Delay函数

    GUI_Delay()函数 使用GUI_Delay()函数时,对于其延时时间不确定,明明设置为最小值1,延时时间 仍旧太长,不能达到需求.遂决定研究明白其实现机理. uC/OS-II使用OSTimeD ...

  7. client/offset/srooll位置与关系

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 2016年10月12日 星期三 --出埃及记 Exodus 18:23

    2016年10月12日 星期三 --出埃及记 Exodus 18:23 If you do this and God so commands, you will be able to stand th ...

  9. Xcode的Architectures和Valid Architectures的区别,

    登录 | 注册 ys410900345的专栏 目录视图摘要视图订阅 学院APP首次下载,可得50C币!     欢迎来帮助开源“进步”     当讲师?爱学习?投票攒课吧     CSDN 2015博 ...

  10. JLINK使用教程详解，以及与JTAG区别

    对于一个新手来说,一切都不容易. 而从头学起也是一件非常美好的事. 观看     调试ARM,要遵循ARM的调试接口协议,JTAG就是其中的一种.当仿真时,IAR.KEIL.ADS等都有一个公共的调试 ...