问题：

默认的radio控件不是很好看，我们能否自定义一个radio图标？

解决：

1.radio有input和lable两个标签。

2.<input>是前面的图标，选中后图标变化。

3.<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

4.我们有三种思路达到效果：

4.1修改<input>中图标的样式。该方法关键点在于是否有这些 css熟悉。

4.2通过事件机制：某个radio控件被选中后，通过添加js事件动态改变某些radio控件的背景图片。

4.3隐藏<input>图标，在<label>中存放你自定义的背景图片和文字，直接使用css的background属性来显示自定义图标。

5.这里看看4.3的实现代码：

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">

    /*两个复选框box浮动，方便设置css*/

    .radio{

        display:-moz-box;

        display:-webkit-box;

        display:box;

        float:left;

    }

    /*让原有的复选框图案隐藏*/

    .radios input[type=radio]{

        display: none;

    }

    /*图片和文字都放在label里面*/

    .radios label{

        display:-moz-box;

        display:-webkit-box;

        display:box;

        float:left;

        line-height: 20px;/*不设行高文字垂直方向不居中*/

        text-indent: 30px;/*使文字缩进：文字和图片都在label里面，不缩进文字和图片叠加在一起*/

        background:url(no.png) no-repeat left top;/*背景图片*/

        background-size: 20px 20px;/*设置背景图片大小*/

    }

    .radios input[type=radio]:checked + .radio{

        background:url(yes.png) no-repeat left top;/*被选中时，换背景图片*/

        background-size: 20px 20px;

    }

    </style>

</head>

<body>

    <div id="box" style="margin:100px 0 0 100px;">

        <p style="font-size:16px; color:#000000; float:left; margin:0 20px 30px 0">审核结果<p>

        <div class="radios">

                <input type="radio" name="rGroup" id="r1" checked="checked" />

                <label class="radio" for="r1" style="font-size:14px; color:#333333;">通过</label>

                <input type="radio" name="rGroup" id="r2" />

                <!--name:表单(form)的控件名，提交的数据都用name来控制。如checkbox和radio,有多个name会同时对应多个控件来标识其属于一个radio。此外浏览器会根据name来设定发送到服务器的request-->

                <label class="radio" for="r2" style="font-size:14px; color:#333333; margin-left:70px">否决</label>

        </div>

    </div>

</body>

<!--script必须放在body下面，否则getElementById找不到id-->

<script type="text/javascript">

    var tmp = document.getElementById("r1");

    tmp.addEventListener("change",radioclick,false);

    var tmp2 = document.getElementById("r2");

    tmp2.addEventListener("change",radioclick2,false);

    function radioclick(){

        alert("审核结果:通过!!");

    }

    function radioclick2(){

        alert("审核结果:否决!!");

    }

</script>

</html>

上面的背景图片no.png 和yes.png是你自定义的图片；

效果如下：

选中“通过”，跳出“审核结果：通过！！”提示：

“通过”和“否决”前面的图标，都是可以自定义的，而且选中之后图标会跟着变，达到预期效果！

选中“否决”，跳出“审核结果：否决！！”提示：

自定义radio图标的更多相关文章

  1. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  2. java 自定义鼠标图标

    由于截图截不了,所以看不了图.源码如下: import java.awt.Cursor; import java.awt.Image; import java.awt.Point; import ja ...

  3. easyui之自定义字体图标（鼠标覆盖时切换颜色）

    项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...

  4. ionic ion-tab图标修改, 自定义tab图标

    遇到需要自定义tab图标很简单, 只需要自定义相应的css就可以了, 这里要注意的是如何调整背景图片的大小. <ion-view hide-back-button="false&quo ...

  5. 自定义iconfont 图标库下载本地在移动App的使用及svg彩色图标

    自定义iconfont 图标库扩展 在Hbuilder开发移动App的使用及svg彩色图标(或mui图标库的自定义扩展) 前提准备:1.登录阿里iconfont图标库,创建自己的项目,地址:http: ...

  6. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

  7. 在项目中增加自定义icon图标

    以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...

  8. 自定义radio/checkbox样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 自定义带图标input样式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. NFC学习笔记2——Libnfc简介及安装

    我一直希望自己的文章做一些记录的英文翻译.趁着学习NFC,现在,libnfc主页libnfc介绍和不同的操作系统libnfc文章做一些翻译安装.一方面,提高自己的英语,一方面有了解libnfc. 原文 ...

  2. 使用 Eclipse 的 SVN 主要插件创建项目/支/标签

    原文 阅读 Mark Phippard 该博客以及<Subversion 与版本号控制>之后,我了解到 分支/标签 是 SVN 非常棒的特性之中的一个.但我在使用推荐的 "tru ...

  3. 【C++基础】类的组合

    所谓类的组合是指:类中的成员数据是还有一个类的对象或者是还有一个类的指针或引用.通过类的组合能够在已有的抽象的基础上实现更复杂的抽象. 比如: 1.按值组合 #include<iostream. ...

  4. 左右JAVA示例代码事件分发和监督机制来实现-绝对原创有用

    文章标题:左右JAVA示例代码事件分发和监督机制来实现 文章地址: http://blog.csdn.net/5iasp/article/details/37054171 作者: javaboy201 ...

  5. Linux下一个C基本的编程----写进Blog在那之前

    展望2周的实习吧. 各种酸甜苦辣.由于公司只是广告.毛承保让我去.严重的歧视.想也想开,争夺.结果让它成为.还是把它写自己的学习经验,我有同样的希望和迷茫的同学.少走一点弯路.行.切入正题: 一.參考 ...

  6. VTune使用amplxe-cl进行Hardware Event-based Sampling Analysis 0分析

    于BASH正在使用VTune进行Hardware Event-based Sampling Analysis 0分析: 结果(部分)例如以下: 版权声明:本文博客原创文章.博客,未经同意,不得转载.

  7. hadoop 2.2.0集群安装

    相关阅读: hbase 0.98.1集群安装 本文将基于hadoop 2.2.0解说其在linux集群上的安装方法,并对一些重要的设置项进行解释,本文原文链接:http://blog.csdn.net ...

  8. Struts2和Struts1的主要区别（完整版）

    Struts1和Struts2的区别和对比: Action 类: • Struts1要求Action类继承一个抽象基类.Struts1的一个普遍问题是使用抽象类编程而不是接口,而struts2的Act ...

  9. [连载]Java程序设计(04)---任务驱动的方法：工资结算系统

    任务:或在公司,该公司将其分为三类人员:部门经理.销售员.在发工资的时候,部门经理拿固定月薪8000元.技术人员按每小时100元领取月薪.销售人员依照500元底薪加当月销售额的4%进行提成.设计并实现 ...

  10. POJ3233(矩阵二分再二分)

    题目非常有简单: Description Given a n × n matrix A and a positive integer k, find the sum S = A + A2 + A3 + ...