问题：

默认的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. C#中利用双缓冲技术解决绘图闪屏问题。

    这段时间在做一个小型游戏,在界面显示的时候用到了一些图形.一开始涉及到的图形全都用控件的背景图片代替了.这样游戏运行的时候存在的一个很大的问题是游戏运行很慢.小组成员费尽周折,即将放弃,每一个成员都愁 ...

  2. MyEclipse优化全攻略

    (0) 吐槽 Eclipse仅仅是个半成品有木有?什么都须要自己安装插件,新手非常难用有木有? 安装上插件以后了版本号兼容和各种问题烦死人有木有? 都怪碎片和版本号乱公布有木有? IntelliJ I ...

  3. ar命令提取.a时刻，一个错误 is a fat file (use libtool(1) or lipo(1) and ar(1) on it)

    在减压.a当文件,据报一个类别似 xxx.a is a fat file (use libtool(1) or lipo(1) and ar(1) on it)的错误,经过查找资料,原来是由于该.a文 ...

  4. uploadfiy 动态传递Form 参数

    参见 百度 http://jingyan.baidu.com/article/a3a3f8118b1c4d8da3eb8a60.html @{    ViewBag.Title = "Ind ...

  5. Hadoop群集设置

    Hadoop群集设置 近期特别看了Hadoop的资料.感觉特别好,整理一下发在自己的博客上,希望对想了解集群的网友有所帮助. 參考资料:http://hadoop.apache.org/docs/r1 ...

  6. 在C#编程中玩转枚举，分享我的EnumHelper。

    在C#编程中玩转枚举,分享我的EnumHelper. 在软件开发过程中,我们经常会为特定的场景下的特定数据定义逻辑意义.比如在用户表中,我们可能会有一个用户状态字段,该字段为整形.如果该字段的值为1则 ...

  7. java设计模式之七装饰器模式（Decorator）

    顾名思义,装饰模式就是给一个对象增加一些新的功能,而且是动态的,要求装饰对象和被装饰对象实现同一个接口,装饰对象持有被装饰对象的实例,关系图如下: Source类是被装饰类,Decorator类是一个 ...

  8. .NET开源项目 TOP 25

    .NET开源项目 TOP 25 如果知道.NET项目在开源中国的git上所占的比重只有5%的话,为什么这个<2014年国人开发的最热门的开源软件TOP 100>榜中.NET项目那么少就是情 ...

  9. LeetCode——Longest Palindromic Substring

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  10. 阐述linux IPC（五岁以下儿童）：system V共享内存

    [版权声明:尊重原创.转载请保留源:blog.csdn.net/shallnet 要么 .../gentleliu,文章学习交流,不用于商业用途]         system V共享内存和posix ...