最终效果：

实现方法

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. Quartz (一)

    1 核心接口 1.1 Scheduler---核心调度器 1.2 Job---任务 1.3 JobDetail---任务描述 1.4 Trigger---触发器 2 触发器 Tigger(CornTr ...

  2. 将 Eclipse 的配色改为黑底白字

    1.先到 eclipsecolorthemes下载一个主题. 2.Eclipse File-->Import 3.Import视窗内选择 General-->Preferences 4.选 ...

  3. iOS 伐码猿真爱—「偷懒 || 效率 工具类」

    自检 代码不会可以多敲几次,学习的重点是思想:-- 认同. BUT 如果你把自己会的.熟知的.可以说写的似流水的代码,不管是在工作 或是 自学习中你还是一点一点的敲出来,是不是有点...,copy & ...

  4. 常用的CI笔记

    1． thinkphp 封装好的$this->success(),就直接实现成功跳转,$this->error(),错误跳转.CI有show_error(),但是却不能直接实现跳转,所以需 ...

  5. .NET面试题系列[18] - 多线程同步（1）

    多线程:线程同步 同步基本概念 多个线程同时访问共享资源时,线程同步用于防止数据损坏或发生无法预知的结果.对于仅仅是读取或者多个线程不可能同时接触到数据的情况,则完全不需要进行同步. 线程同步通常是使 ...

  6. React入门---属性(state)-7

    state------>虚拟dom------>dom 这个过程是自动的,不需要触发其他事件来调用它. state中文理解:页面状态的的一个值,可以存储很多东西. 学习state的使用: ...

  7. adesk上架实施--VDC详细配置（深信服论坛转）

    1.建立独享桌面资源   1.1通过https://VDCIP:4430登录控制台,VDI设置-->资源管理-->新建独享桌面资源 1.2点击新建,独享桌面资源后显示如下界面 配置完后,往 ...

  8. Javascript性能优化之节流函数

    在我们的工作中往往有这样的需求,下拉上拉加载实现无限加载列表数据这样的一个功能,这个时候小伙伴们可能就觉得这个功能几分钟的事,于是乎,下边这段代码浩浩荡荡就出来了 window.addEventLis ...

  9. ListView的使用（二）长按弹出上下文菜单

    public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView ...

  10. python语言精粹《一》

    第一章 静态语言:需要声明类型.变量不能改变类型! 动态语言:(也称脚本语言)主要的应用场景都是很短的应用程序(脚本),比如给静态语言编写的程序进行数据预处理.这样的程序通常也统称胶水代码. pyth ...