问题：

默认的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. [POJ 3311]Hie with the Pie——谈论TSP难题DP解决方法

    主题连接:  id=3311">http://poj.org/problem?id=3311 题目大意:有n+1个点,给出点0~n的每两个点之间的距离,求这个图上TSP问题的最小解 ...

  2. crawler_Docker_解决用 JavaScript 框架开发的 Web 站点抓取

    [转载,后续补上实践case] 有了 Docker,用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取 [编者的话]Prerender 服务能够为网络爬虫提供预先渲染的 ...

  3. linux_增加用户组_删除用户

    添加账号组 /usr/sbin/groupadd iknow 添加账号 /usr/sbin/useradd  -g iknow -d /home/iknow/ iknow 更改密码 passwd 选项 ...

  4. Python学习笔记21：数据库操作(sqlite3)

    Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言. SQLite作为后端数据库,能够搭配Python建站点,或者制作有数据存储需求的工具. SQLite还在其他领域有广泛 ...

  5. 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）

    对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...

  6. Swift中文教程(三)--流程控制

    原文:Swift中文教程(三)--流程控制 Swift用if和switch编写条件控制语句,用for-in,for,while和do-while编写循环.条件控制语句和循环语句中,小括号是可选的,但花 ...

  7. 再议 js 数字格式之正则表达式

    原文:再议 js 数字格式之正则表达式 前面我们提到到了js的数字格式<浅谈 js 数字格式类型>,之前的<js 正则练习之语法高亮>里也提到了优化数字匹配的正则.不过最近落叶 ...

  8. div中显示某个网页

    原文:div中显示某个网页 1.<iframe>方法 2.ajax方法 ajax+流实现无框架限制块刷新: 主框架index页面: js: $(function(){ $("#d ...

  9. 汽车之家购买价格PC真正的原因阿拉丁

        网行业风起云涌,先是6月3号汽车之家天价竞购百度PC阿拉丁.接着今天又有消息说易车拿下百度移动阿拉丁.易车拿下百度移动阿拉丁能够想象.但PC阿拉丁被向来不屑流量购买,以自主流量自居的汽车之家拿 ...

  10. CSS3+HTML5特效6 - 闪烁的文字

    先看效果 abcd 这个效果也比较简单,利用keyframes对文字的大小.透明度及颜色做循环显示. CSS <style> @-webkit-keyframes flash { 0%{ ...