最终效果：

实现方法

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. js中__proto__和prototype的区别和关系？

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

  2. android webview和 javascript 进行交互

    HTML5进行app开发具有开发快,跨平台等优点,但是当客户需要访问照相机或者调用摄像头等硬件的时候,H5就会有限制,必须要调用原生方法进行设备访问.下面简要介绍JS和原生方法互相调用的方法: 1 在 ...

  3. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  4. js修改样式表规则

    <div>adasfsfs</div> <div id="div">adasfsfs</div> <div>adasfs ...

  5. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  6. css中最基本几个选择器

    css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器 ...

  7. zabbix安装配置

    实验环境 主机名 操作系统版本 IP地址 安装软件 console CentOS 7.0 114.55.29.246 Httpd.Nginx.MySQL.Zabbix log1 CentOS 7.0 ...

  8. python 基础安装使用

    首先我们来学习一下怎么安装python和更新python,再来学习一些简单的解释器.变量.编码内容.循环等代码 第一步开始安装Python环境 安装Python windows: 1 2 3 4 5 ...

  9. vs项目和msql不兼容解决方案

    当vs的工程项目加载了libmysql.lib 即:附加包含目录,附加库目录,附加依赖项都设置好之后,如过编译出现如下: error LNK2019: 无法解析的外部符号 _mysql_real_co ...

  10. javascript设计模式详解之策略模式

    接上篇命令模式来继续看下js设计模式中另一种常用的模式,策略模式.策略模式也是js开发中常用的一种实例,不要被这么略显深邃的名字给迷惑了.接下来我们慢慢看一下. 一.基本概念与使用场景: 基本概念:定 ...