最终效果：

实现方法

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. poj2155二维树状数组

    Given an N*N matrix A, whose elements are either 0 or 1. A[i, j] means the number in the i-th row an ...

  2. js中__proto__和prototype的区别和关系？

    _proto__(隐式原型)与prototype(显式原型)1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性 ...

  3. 关于WebGIS开源解决方案的探讨（转载）

    1.背景 公司目前的多数项目采用的是ArcGIS产品+Oracle+WebLogic/Tomcat/APUSIC/WebShpere这样的架构.由于 公司从事的是政府项目,甲方单位普遍均采购有以上产品 ...

  4. 微信公众号开发笔记1(nodejs开发的)

    本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...

  5. [js笔记整理]面向对象篇

    一.js面向对象基本概念 对象:内部封装.对外预留接口,一种通用的思想,面向对象分析: 1.特点 (1)抽象 (2)封装 (3)继承:多态继承.多重继承 2.对象组成 (1)属性: 任何对象都可以添加 ...

  6. [笔记]机器学习(Machine Learning) - 00.目录/大纲/写在之前

    目录会根据我的学习进度而更新,给自己列一个大纲以系统地看待整个学习过程. 学习资料来源 学习的是Coursera上吴恩达(Andrew Ng)老师的机器学习视频(课程传送门,最近在"最强大脑 ...

  7. java图片上传（mvc）

    最近有开始学起了java,好久没写文章了,好久没来博客园了.最近看了看博客园上次写的图片上传有很多人看,今天在一些篇关于java图片上传的.后台接收用的是mvc.不墨迹了,直接上图. 先看目录结构.i ...

  8. C#单元测试，带你入门

    注:本文示例环境 VS2017 XUnit 2.2.0 单元测试框架 xunit.runner.visualstudio 2.2.0 测试运行工具 Moq 4.7.10 模拟框架 为什么要编写单元测试 ...

  9. vue动态加载图片，取消格式验证

    vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...

  10. SparkMLlib学习分类算法之逻辑回归算法

    SparkMLlib学习分类算法之逻辑回归算法 (一),逻辑回归算法的概念(参考网址:http://blog.csdn.net/sinat_33761963/article/details/51693 ...