最终效果：

实现方法

index.html：

 <!DOCTYPE html>

 <html>

     <head>

         <title></title>

         <meta charset="UTF-8"/>

         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

         <link rel="stylesheet" type="text/css" href="style.css"/>

     </head>

     <body>

         <div class="checkbox">

             <input type="checkbox" checked="checked">

         </div>

         <div class="radiobox">

             <input type="radio" name="1" />

             <input type="radio" name="1" checked="checked" />

         </div>

     </body>

 </html>

style.css：

 .checkbox,

 .radiobox {

     width: 1.8em;

     height: 1.8em;

 }

 .checkbox input[type=checkbox],

 .radiobox input[type=radio] {

     -webkit-appearance: none;

     background-color: transparent;

     outline: 0 !important;

     border:;

     font-size: 1em !important;

 }

 .checkbox input[type=checkbox]:before,

 .radiobox input[type=radio]:before {

     display: inline-block;

     text-align: center;

     font: normal normal normal 14px/1 FontAwesome;

     font-size: 1.8em;

     font-weight: thin;

     text-rendering: auto;

     -webkit-font-smoothing: antialiased;

     -moz-osx-font-smoothing: grayscale;

     color: rgb(212, 212, 212);

 }

 .checkbox input[type=checkbox]:checked:before,

 .radiobox input[type=radio]:checked:before {

     color: rgb(76, 184, 184);

 }

 .checkbox input[type=checkbox]:before {

     content: "\f096";

 }

 .checkbox input[type=checkbox]:checked:before {

     content: "\f14a";

 }

 .radiobox input[type=radio]:before {

     content: "\f1db";

 }

 .radiobox input[type=radio]:checked:before {

     content: "\f192";

 }

该方法中用到了Font Awesome图标文字，上面代码中使用了Bootstrap CDN的方法添加了Font Awesome，也可以去Font Awesome官网下载到本地调用来使用。

Font Awesome官网：http://fontawesome.io/

此方法不兼容IE浏览器，只适用于移动端，不适用与PC端。

用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端的更多相关文章

  1. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  2. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  3. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  4. 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  5. 原创：纯CSS美化单复选框（checkbox、radio）

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

  6. 纯CSS修改checkbox复选框样式

    借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  7. css 设置 checkbox复选框控件的对勾√样式

      效果 最终的样式,想要的效果:   我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px * 15px的长方形并给他加上边框. ...

  8. Android基础控件单选按钮RadioButton和Checkbox复选按钮的使用

    1.相关简介 RadioButton需要和RadioGroup结合使用,在RadioGroup设置布局方式! Checkbox是单独使用,本文为了方便放在了RadioGroup中! 2.简单使用 方法 ...

  9. 纯CSS修改checkbox复选框样式-02

    我有用过这个纯修改input属性的 本人修改后的代码和效果图(修的不好), 这个是改动最简单的: css代码 input[type=checkbox]{ visibility: hidden; } i ...

随机推荐

  1. final的用法

    先来看一段代码 class Car extends Vehicle {     public static void main (String[] args)     {         new  C ...

  2. spring计划任务

    Spring3中加强了注解的使用,其中计划任务也得到了增强,现在创建一个计划任务只需要两步就完成了: 创建一个Java类,添加一个无参无返回值的方法,在方法上用@Scheduled注解修饰一下: 在S ...

  3. IOS对话框UIAlertView

    //修改弹出对话框的样式 alertView.alertViewStyle = UIAlertViewStylePlainTextInput; //根据索引获取指定的某个文本框 [alertView ...

  4. Yii框架后续

    关于Yii框架遗留的知识点. 1.url路由方式 (1).问号传参(默认) eg: http://localhost/项目/app/index.php http://localhost/项目/app/ ...

  5. react native 升级到0.31.0的相关问题 mac Android Studio开发环境

    报错Caused by: java.lang.ClassCastException: android.app.Application cannot be cast to com.facebook.re ...

  6. 转载+++++iptables详解+++++转载

    转载:http://blog.chinaunix.net/uid-26495963-id-3279216.html 一.前言 防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件 ...

  7. OC-不可变数组NSArray

  8. Git相关操作及记录

    一.软件 1.下载Git客户端软件 Widows平台: https://github.com/git-for-windows/git/releases/download/v2.13.0.windows ...

  9. LINQ基础(二)

    本文主要介绍LINQ查询操作符 LINQ查询为最常用的操作符定义了一个声明语法.还有许多查询操作符可用于Enumerable类. 下面的例子需要用到LINQ基础(一)(http://www.cnblo ...

  10. hdu4764 Stone 博弈

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4764 很水的博弈题目 代码: #pragma comment(linker, "/STAC ...