最近很多人问怎么美化表单的元素，大家都知道表单元素在各个浏览器中的表现不一，反正也是特别的丑，那么问题就来了，我们能自己设计表单元素的外观么？答案是可以的，现在我们就来试试吧。我们用两种方式来实现这一效果，一种是用原生的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. frameset子窗口获取父窗口失败原因？

    报错信息: arrow.html:44 Uncaught SecurityError: Blocked a frame with origin "null" from access ...

  2. java 堆栈 静态

    所以静态变量和非静态变量的区别就在于静态变量可以用来计数,而非静态变量则不行. 理解了内存,就理解了一切,就理解了各种各样的语言.所有的语言无非都是这样:局部变量分配内存永远在栈里面,new出来的东西 ...

  3. C#:使用Hashtable实现输出那些用户发表主题最多的信息

    构思:先计算各自的数量,那些数量最多,输出详细信息 具体算法如下: public class Count { #region 计算各实体数量 public static Hashtable Entit ...

  4. DedeCMS模板文件不存在,无法解析文档! 问题定位方法

    生成静态的时候,经常会遇到“模板文件不存在,无法解析文 档!”的问题.很多朋友试过论坛里很多方法,都是针对某些人可以解决,某些人的问题依旧,为什么呢?其实问题很可能确实是多种多样的,表现结果却是一样, ...

  5. [HTML]js动态修改表格里面的内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...

  6. 周赛-Killing Monsters 分类： 比赛 2015-08-02 09:45 3人阅读 评论(0) 收藏

    Killing Monsters Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...

  7. VS2015+Windows 10下配置opencv3.0

    博客园样式换了,原先的文章排版太乱了,新发一篇 ##0. 安装 opencv 3.0 首先去官网下载安装包(其实是个压缩包),释放到随便的一个路径里面为了方便描述,下面把这个路径称为 cvPath. ...

  8. C++运算法优先级

  9. linux下svn常用指令

    windows下的TortoiseSVN是资源管理器的一个插件,以覆盖图标表示文件状态,几乎所以命令都有图形界面支持,比较好用,这里就不多说.主要说说linux下svn的使用,因为linux下大部分的 ...

  10. 第五课 SharedPrefereneces

    SharedPreferences总结: 一.SharedPreferences特点 1.本质是基于xml文件储存key-value对数据: 2.SharedPreferences对象本身只能获取数据 ...