问题：

默认的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. JavaScript之再谈回调与闭包

    前些阵子写了几篇关于回调和闭包的博文,感觉自己都是似懂非懂,最近在项目中又碰到了类似的情况,故在此咱们来重弹js中的回调与闭包. 先说说回调: 百度百科: 回调函数就是一个通过函数指针调用的函数.如果 ...

  2. JavaBean中DAO设计模式介绍

    一.信息系统的开发架构 客户层-------显示层-------业务层---------数据层---------数据库 1.客户层:客户层就是client,简单的来说就是浏览器. 2.显示层:JSP/ ...

  3. linux_ubuntu12.04 安装 svn

    sudo apt-get install subversion sudo mkdir /home/svn sudo svnadmin create /home/svn/repository cd /h ...

  4. java 字符串反转

    描述:给我一个字符串,例如I love java,输出: java love I   方法一 public class StringReverse { public void swap(char[] ...

  5. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

  6. 我的MYSQL学习心得（八）

    原文:我的MYSQL学习心得(八) 我的MYSQL学习心得(八) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL ...

  7. 批量执行SQL文件

    原文:批量执行SQL文件 摘要:很多时候我们在做系统升级时需要将大量的.sql文件挨个执行,十分不方便.而且考虑到执行顺序和客服的操作方便性,能不能找到一种简单的方法来批量执行这些sql文件呢? 主要 ...

  8. Model Validation in Asp.net MVC

    原文:Model Validation in Asp.net MVC 本文用于记录Pro ASP.NET MVC 3 Framework中阐述的数据验证的方式. 先说服务器端的吧.最简单的一种方式自然 ...

  9. EasyMonkeyDevice vs MonkeyDevice&HierarchyViewer API Mapping Matrix

    1. 前言 本来这次文章的title是写成和前几篇类似的<EasyMonkeyDevice API实践全记录>,内容也打算把每个API的实践和建议给记录下来,但后来想了下觉得这样子并不是最 ...

  10. SALT 加密

    大家都知道,MD5加密是不可逆.但事实上,我们通常值的MD5算法.黑客的眼下破解率相对较高.也有非常多站点上干脆就提供批量解密MD5的服务,当然是收费的.http://www.xmd5.org.这里提 ...