如果你下定决心要改变现有的默认的checkbox和radio的样式，那么我目前有两种办法：

1、自己动手写一个，也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉，使用绝对定位的方式，手动切换checked和unchecked的图片，定位到原来input显示的地方；

2、使用jQuery的iCheck插件 。

中文DOC地址：http://www.bootcss.com/p/icheck/

github地址：https://github.com/fronteed/iCheck

一、先来说说第一种办法吧，我觉得这个是最好的，又不用多添加js，自己写几行代码就行了。

demo如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>

   <title></title>

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />

   <link rel="stylesheet" type="text/css" media="screen" href="grey.css" />

   <script type="text/javascript" src="jquery.min.js"></script>

   <script type="text/javascript" src="icheck.js"></script>

    <style>

       .checkbox-label {

           position:relative;

           display:block;

        }

        .hidebox {

           opacity:0;

           filter:alpha(opacity:0);

           z-index:2;

           position:relative;

        }

        .checkbox-label .checkbtn {

           display:block;

           width:12px;

           height:12px;

           left:5px;

           top:-15px;

           position:absolute;

           background: url(checked.png) no-repeat;

        }

        .checkbox-label .uncheckbtn {

           background: url(unchecked.png) no-repeat;

        }

    </style>

 </head>

 <body >

   <div class="container">

     <div class="header">

       <h1>CheckBox And Radio Demo</h1>

     </div>

     <div>

        <label class="checkbox-label">

           <input type="checkbox" class="hidebox" checked/>复选框1号

           <p class="checkbtn"></p>

         </label>

         <label class="checkbox-label">

           <input type="checkbox" class="hidebox"/>复选框2号

           <p class="checkbtn"></p>

         </label>

         <label class="checkbox-label">

           <input type="checkbox" class="hidebox"/>复选框3号

           <p class="checkbtn"></p>

         </label>

     </div>

   </div>

   <!-- /container -->

   <script>

         (function($){

           $('input[type=checkbox]').on('click',function(){

              var box = $(this),

                  mark = box.parent().find('.checkbtn');

              $(this).prop('checked') ? mark.addClass('uncheckbtn') : mark.removeClass('uncheckbtn');

           });

         })(jQuery);

 </script>

 </body>

 </html>

这是一个朋友（大牛）教我的方法，代码又少，写得又好，我也很喜欢。

这里面有的说的我感觉就是attr()和prop()方法，以前我没觉得有什么不同。但实际上还是有区别，简单来说吧，如果你想得到字符串的属性值的话那么就要用attr(),但如果你的本意是获得bool值得话，那么就要用prop()了。

二、那么如果你的项目比较大，兼容性封装性等各个方面要求比较严格的话，那么你可以尝试一下iCheck插件，但我目前还存在问题，如果你的checkbox和radio的功能比较简单的话，那么没有任何问题，但是如果你有全选部分选择的功能的话，那么你可能要花点心思了，我现在列出我的使用方法和心得，如果你有更好的解决其中问题的方法的话，请教教我喔，感激不尽。

简单使用真的简单，demo如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>

   <title></title>

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />

   <link rel="stylesheet" type="text/css" media="screen" href="grey.css" />

   <script type="text/javascript" src="jquery.min.js"></script>

   <script type="text/javascript" src="icheck.js"></script>

 </head>

 <body >

   <div class="container">

     <div class="header">

       <h1>CheckBox And Radio Demo</h1>

     </div>

     <div>

         <label class="checkbox-label">

           <input type="checkbox" class="hidebox" id="box1" checked/>复选框1号

           <p class="checkbtn"></p>

         </label>

         <label class="checkbox-label">

           <input type="checkbox" class="hidebox" id="box2"/>复选框2号

           <p class="checkbtn"></p>

         </label>

         <label class="checkbox-label">

           <input type="checkbox" class="hidebox" id="box3"/>复选框3号

           <p class="checkbtn"></p>

         </label>

     </div>

     <div class="change">

       <span class="toChecked">选中复选框1号和3号</span>

       <span class="unChecked">取消选中复选框1号和3号</span>

       <span class="toDisabled">disable复选框1号和3号单选框2号</span>

       <span class="undisabled">取消disable复选框1号和3号单选框2号</span>

     </div>

   </div>

   <!-- /container -->

   <script>

     $(document).ready(function(){

         $('input').iCheck({

           checkboxClass:'icheckbox_flat-grey',

           radioClass:'iradio_flat-grey',

           increaseArea:'20%'

         });

        });

        $('.toChecked').click(function(){

              $('#box1,#box3').iCheck('check');

        });

        $('.unChecked').click(function(){

              $('#box1,#box3').iCheck('uncheck');

        });

        $('.toDisabled').click(function(){

              $('#box1,#box3,#rad2').iCheck('disable');

        });

        $('.undisabled').click(function(){

              $('#box1,#box3,#rad2').iCheck('enable');

        });

   </script>

 </body>

 </html>

然后去下载iCheck.js和像grey.css（多种可选）这样的样式文件就可以了，简单的就可以换样式了喔。

但是如果你想用到项目里，可能就没这么简单了。我踩过的坑有：

1、虽然iCheck的实现原理是在input外包裹一层div用来实现样式图片的切换，跟我们手动实现的原理差不多，但是虽然我们可能在浏览器中不容易显示的看出来，实际上input的checked属性也已经切换了；

2、如果你的input部分是在js中动态写进去的话，那么就要注意你有关iCheck的代码的位置，一定要等到dom全部加载完成之后。iCheck才会起作用。

3、还有一个还没有迈出来的坑，如果你的项目这个相关的功能需要完成，那么你可能需要在回调函数中完成一些操作，我的问题就在于，里面的操作实际上已经完成了（控制台可查看），但是我在其中调用的iCheck（）方法，却不起作用了，看了很多github上的issue，相同问题很多。

like this：

$("#_hs_select_all").on('ifChecked',function(){

            $("._hs_item_cb").prop('checked',true).iCheck('check');

            $("._hs_item_cld_cb").prop('checked',true).iCheck('check');

         }).on('ifUnchecked',function(){

             $("._hs_item_cb").prop('checked',false).iCheck('uncheck');

             $("._hs_item_cld_cb").prop('checked',false).iCheck('uncheck');       
  });

我也尝试过换2.x版本，但问题似乎更多，待解。

如果你也在换掉checkbox和radio默认的丑样式，两种方法都可任你选择。

论checkbox和radio的样式美化问题的更多相关文章

  1. checkbox和radio的样式美化问题

    如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...

  2. 巧用CSS3伪类选择器自定义checkbox和radio的样式

    由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的c ...

  3. 二十四、小程序中改变checkbox和radio的样式

    来源:https://blog.csdn.net/qq_39364032/article/details/79742415 在微信小程序里面,有时候为了配合整个项目的风格,checkbox和radio ...

  4. 微信小程序开发——修改小程序原生checkbox、radio默认样式

    复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { ...

  5. Css实现checkbox及radio样式自定义

    前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...

  6. input美化 checkbox和radio样式

    input美化    checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...

  7. 自定义表单样式之checkbox和radio

    1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...

  8. HTML的checkbox和radio的美化

    checkbox和radio的美化 checkbox: <style type="text/css"> input[type="checkbox"] ...

  9. css设置移动端checkbox和radio样式

    复选框Checkbox是Web应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计要求,这时需要更为精致的复选框样式.以往只有少数浏览 ...

随机推荐

  1. Thinkphp Exception捕获异常失败

    try catch 比较坑,默认这样是走TP 的错误模板页面 自定义的话: try { } catch ( \Exception $e ) {}加个\

  2. linux系统编程之错误处理

    在linux系统编程中,当系统调用出现错误时,有一个整型变量会被设置,这个整型变量就是errno,这个变量的定义在/usr/include/errno.h文件中 #ifndef _ERRNO_H /* ...

  3. H5前端性能测试快速入门

    前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试.那本文谈到的则是H5前端性能测试,并希望通过阅读本文后,能够知道 ...

  4. 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 （ 摘自zdwzdwzdw）

    笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...

  5. sky简介

    sky简介 sky是一种构建高性能.跨平台手机APP的新的途径.更值得关注的是,sky是一种渲染引擎.脚本引擎.一个框架和一系列的材料设计模式的窗体组件.sky是当前以及未来手机APP的一种优化手段. ...

  6. PostgreSQL和MYsql的对比

    一.postgresql多进程,mysql多线程 二.postgresql和它配套的开源软件非常多,容易进行负载均衡 三.posgresql代码简介,mysql比较混乱 四.最重要的,postgres ...

  7. [UCSD白板题] Fractional Knapsack

    Problem Introduction Given a set of items and total capacity of a knapsack,find the maximal value of ...

  8. js 监听输入框输入事件兼容ie7

    $(element).bind("input propertychange",function(){});

  9. Javac 手动编译时，出现乱码或编码格式问题

    使用Javac进行手动编译时,出现乱码或编码格式问题,原因如下:现象:编译时出现乱码或编译错误 即使改成UTF-8仍然会出错 原因如下:某些编辑器会往utf8文件中添加utf8标记(editplus称 ...

  10. shell脚本调试

    转自:http://www.ibm.com/developerworks/cn/linux/l-cn-shell-debug/ 一. 前言 shell编程在unix/linux世界中使用得非常广泛,熟 ...