利用css的label的伪类（::before）代替checkbox和radio效果：

  1. 优点：需要图片来调整选中前和选中后的样式，纯css搞定

  2. 缺点：兼容性，IE8以下不支持

在线例子:

css改变默认的radio和checkbox的样式

input[type="radio"],
input[type='checkbox'] {
display: none;
}

input[type='radio']+label::before,

input[type='checkbox']+label::before {

  content: '';

  display: inline-block;

  width: 15px;

  height: 15px;

  margin-right: 6px;

  vertical-align: middle;

  border: 1px solid #E4E4E4;

  border-radius: 50%;

  background: #FFFFFF;

  background-image: url('https://i.loli.net/2018/07/20/5b517d0bf066a.png');

  background-position: 0px 0px;

}

input[type='radio']:hover+label::before,

input[type='checkbox']:hover+label::before {

  background-position: -15px 0px;

}

input[type='radio']:checked+label::before,

input[type='checkbox']:checked+label::before {

  background-position: -15px -15px;

}

单选框

男

女

多选框

苹果

橙子

代码:

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>css改变默认的radio和checkbox的样式</title>

  <style>

    input[type="radio"],

    input[type='checkbox'] {

      display: none;

    }

    input[type='radio']+label::before,

    input[type='checkbox']+label::before {

      content: '';

      display: inline-block;

      width: 15px;

      height: 15px;

      margin-right: 6px;

      border-radius: 100%;

      vertical-align: middle;

      border: 1px solid #E4E4E4;

      background: #FFFFFF;

      background-image: url('https://i.loli.net/2018/07/20/5b517d0bf066a.png');

      background-position: 0px 0px;

    }

    input[type='radio']:hover+label::before,

    input[type='checkbox']:hover+label::before {

      background-position: -15px 0px;

    }

    input[type='radio']:checked+label::before,

    input[type='checkbox']:checked+label::before {

      background-position: -15px -15px;

    }

  </style>

</head>

<body>

  <p>单选框</p>

  <input type="radio" name="sex" value="man" id="man" checked>

  <label for="man">男</label>

  <input type="radio" name="sex" value="female" id="female">

  <label for="female">女</label>

  <p>多选框</p>

  <input type="checkbox" name="fruits" value="apple" id="apple" checked>

  <label for="apple">苹果</label>

  <input type="checkbox" name="fruits" value="orange" id="orange">

  <label for="orange">橙子</label>

</body>

</html>

用纯css改变默认的radio和checkbox的样式的更多相关文章

  1. 用纯css改变下拉列表select框的默认样式（转）

    用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息.     在这 ...

  2. 微信小程序 - 更改radio和checkbox选中样式

    点击下载源码:示例-更改radio或checkbox选中样式

  3. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  4. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  5. [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...

  6. 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

    体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

  7. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  8. 怎样用纯HTML和CSS更改默认的上传文件按钮样式

    如果你曾经试过,你就会知道,用纯CSS样式加HTML实现统一的上传文件按钮可能会很麻烦.看看下面的不同浏览器的截图.很明显的,他们长得很不一样. 我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览 ...

  9. 自定义radio、checkbox的样式

    input标签中的radio和checkbox是很表单中常用的类型,大多时候,默认样式并不能满足我们的需求,所以有了此篇. 自定义样式,由此开启: html: <div class=" ...

随机推荐

  1. OpenStack Weekly Rank 2015.07.27

    Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 7 1 1 7 10 Sw ...

  2. Kudu版本升级（官网推荐的步骤）（Upgrade from a Previous Version of Kudu）

    不多说,直接上干货! http://kudu.apache.org/docs/installation.html#sles_from_source

  3. 用Windows Live Writer离线写博客

    作为CSDN博客的菜鸟,我发现在线写博客很不方便,而且文字编辑也不方便,比如不能傻瓜化地修改字体和颜色."有志者自有千方百计,无志者只感千难万难."一番搜索后,我发现了Window ...

  4. DEDE把变量放进session中，结果取值为null的问题

    最近在基于织梦CMS(dedecms)做公司网站,可以说改动不少,而其中最令我印象深刻的就是织梦的session.    自己想在前台页面限制一些用户的访问,且后台用户可以访问.必须验证织梦后台用户的 ...

  5. Java对于成对括号的提取

    在工作的项目当中,经运营人员的反馈,发现提供服务的指定属性字段的值为空,导致搜索引擎无法正常搜索到正确的结果. 原始的字符串提取程序为: // 只取对应符号分割的第一部分name.split(&quo ...

  6. 【转】Android 中的 Service 全面总结

    1.Service的种类   按运行地点分类: 类别 区别  优点 缺点   应用 本地服务(Local) 该服务依附在主进程上,  服务依附在主进程上而不是独立的进程,这样在一定程度上节约了资源,另 ...

  7. DataGridView带图标的单元格实现

    目的: 扩展 C# WinForm 自带的表格控件,使其可以自动判断数据的上下界限值,并标识溢出. 这里使用的方法是:扩展 表格的列 对象:DataGridViewColumn. 1.创建类:Data ...

  8. mysql存储过程游标加计划任务事件调度器

    存储过程加事件调度器 -- 存储过程 (多个)游标的使用 临时表的使用(让执行时间从一个小时降低到5分钟)DELIMITER $$ DROP PROCEDURE IF EXISTS `eval_cal ...

  9. PHP运行机制

    PHP运行机制: 访问html文件:访问的域名à解析成IP地址(hosts文件,dns)à找到服务器àapache拿到html文件à返回给浏览器à浏览器解析html内容 访问php文件:apache拿 ...

  10. webapi 开启跨域支持

    1.Global文件: GlobalConfiguration.Configuration.EnableCors(); 2.需要跨域的action或controller添加跨域规则 [EnableCo ...