问题：

默认的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. HDU 3376 &amp;&amp; 2686 方格取数 最大和 费用流裸题

    题意: 1.一个人从[1,1] ->[n,n] ->[1,1] 2.仅仅能走最短路 3.走过的点不能再走 问最大和. 对每一个点拆点限流为1就可以满足3. 费用流流量为2满足1 最大费用流 ...

  2. 【百度地图API】如何调整结果面板的样式？如何获取指定页码的结果？

    原文:[百度地图API]如何调整结果面板的样式?如何获取指定页码的结果? 摘要: 1.你是否想自定义查询后,结果面板的显示样式? 2.数据接口每次只返回10条结果,如何取到单独每一页的结果? ---- ...

  3. Linux-常用命令1---对文件进行查看、复制、移动和分割

    基于Linux的操作系统是一种自由和开放源代码的类UNIX操作系统. Linux的几大特点决定了它的不可代替和无法超越性: (1)免费的/开源的:(2)支持多线程/多用户: (3)安全性好; (4)对 ...

  4. C#-面向对象的多态思想 ---ShinePans

    总结: 多态是面向对象的核心.---------能够理解为一个方法,多种实现, 在这里能够用虚方法,抽象类,接口能够实现多态 1.首先利用接口来实现多态: 接口相当于"功能,"接口 ...

  5. jQuery 文件碎片

    经JS操作DOM节点可以是节点的单位,让我们连接节点,能够createElement,createTextNode,然后,appendChild定在一起,然后再用appendChild或insertB ...

  6. HtmlAgilityPack + Fizzler

    HtmlAgilityPack + Fizzler 这两天在做个爬虫, 一次任务要下载3万多个页面, 然后从这3万多个页面提取数据. 以前写过两年的类似的东西, 基本都是写正则表达式, 速度快, 就是 ...

  7. Codeforces 484B Maximum Value(高效+二分)

    题目链接:Codeforces 484B Maximum Value 题目大意:给定一个序列,找到连个数ai和aj,ai%aj尽量大,而且ai≥aj 解题思路:类似于素数筛选法的方式,每次枚举aj,然 ...

  8. NHibernate-Generator主键生成方式

    NHibernate之Generator主键生成方式   (1) assigned主键由外部程序负责生成,无需NHibernate参与. (2) hilo通过hi/lo 算法实现的主键生成机制,需要额 ...

  9. openwrt驱动与应用程序的联系

    应用程序与驱动之间需要进行命令的传递,因而它们之间需要共同定义一套双方都可以识别的数据结构,实际使用时它们include的是名字和内容相同但位置不同的头文件. 比如spi_gpio_ad7193.h这 ...

  10. C#网络编程系列(两)它Socket同步TCPserver

    声明原文 笔者:竹zz  本文地址http://blog.csdn.net/zhujunxxxxx/article/details/44258719 转载请注明出处 文章系列文件夹 C#网络编程系列文 ...