最终效果：

实现方法

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. window系统下sbt的安装

    最近进了一个新公司,用playframework,不用maven,用sbt,然后就来写一下自己的心酸sbt安装进程吧. 第一步: 安装java8,配置好环境变量,这些不用多说吧,之所以是要8版本,是因 ...

  2. STL容器之优先队列(转)

    STL容器之优先队列 原地址:http://www.cnblogs.com/summerRQ/articles/2470130.html 优先级队列,以前刷题的时候用的比较熟,现在竟然我只能记得它的关 ...

  3. ASP.Net MVC连接MySQL和Code First的使用

    首先要准备一下的工具作为环境 MySQL Community Server 5.7.x My Workbench 6.3 VS2017 新建一个项目,NetMySQLCodeFirst 选择MVC,再 ...

  4. 学习MVC之租房网站（八）- 前台注册和登录

    在上一篇<学习MVC之租房网站(七)-房源管理和配图上传>完成了在后台新增.编辑房源信息以及上传房源配图的功能.到此后台开发便告一段落了,开始实现前台的功能,也是从用户的登录.注册开始. ...

  5. 浅谈一下web移动端基本

    屏幕尺寸.屏幕分辨率.屏幕像素密度 屏幕尺寸: 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等. 屏幕分辨率 ...

  6. JVM方法调用

    当我们站在JVM实现的角度去看方法调用的时候,我们自然会想到一种分类: 1.编译代码的时候就知道是哪个方法,永远不会产生歧义,例如静态方法,private方法,构造方法,super方法. 2.运行时才 ...

  7. Day4-软件目录开发规范

    层次清晰的目录结构:1. 可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目.2. 可维护性高: 定义好 ...

  8. 【JAVAWEB学习笔记】28_jquery加强：json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(Jav ...

  9. 013 session_flush

    在hibernate中也存在flush这个功能,在默认的情况下session.commit()之前时,其实执行了一个flush命令. Session.flush功能: ②理缓存: ②执行sql(确定是 ...

  10. 开涛spring3(8.1) - 对ORM的支持 之 8.1 概述

    8.1  概述 8.1.1  ORM框架 ORM全称对象关系映射(Object/Relation Mapping),指将Java对象状态自动映射到关系数据库中的数据上,从而提供透明化的持久化支持,即把 ...