利用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. python函数基础学习

    函数的定义与调用: def 函数名(参数1,参数2): ‘’’函数注释’’’ print(‘函数体’) return 返回值 定  义:def关键字开关,空格之后接函数名和圆括号,最后冒号结尾 def ...

  2. JAVA中的for循环

    在Java程序中,要“逐一处理”――或者说,“遍历”――某一个数组或Collection中的元素的时候,一般会使用一个for循环来实现(当 然,用其它种类的循环也不是不可以,只是不知道是因为for这个 ...

  3. E. Three strings 广义后缀自动机

    http://codeforces.com/problemset/problem/452/E 多个主串的模型. 建立一个广义后缀自动机,可以dp出每个状态的endpos集合大小.同时也维护一个R[]表 ...

  4. (转)Linux curl命令详解

    命令:curl在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令行工具.它支持文件的上传和下载,是综合传输工具,但按传统,习惯称url为下载工具. ...

  5. (转)Shell脚本之break,continue,和exit区别

    Linux脚本中的break continue exit return break结束并退出循环 continue在循环中不执行continue下面的代码,转而进入下一轮循环 exit退出脚本,常带一 ...

  6. (转)python 集合，列表，元组，字符串，文件等操作总结

    原文:http://www.cnblogs.com/songqingbo/tag/python%E5%87%BD%E6%95%B0/

  7. Spring Boot（一）Hello World

    Spring Boot适合与微服务,方便快速开发,简化配置(约定>配置). 准备工作: SpringBoot 2.0 jdk8 IDEA或者eclipse+Spring Tool Suits 创 ...

  8. SQL DATEDIFF语法及时间函数 Sql 查询当天、本周、本月记录

    SQL DATEDIFF语法及时间函数 Sql 查询当天.本周.本月记录 转:http://blog.csdn.net/Json1204/article/details/7863801?locatio ...

  9. Android串口操作，简化android-serialport-api的demo(转载)

    原帖地址:点击打开 最近在做android串口的开发,找到一个开源的串口类android-serialport-api.其主页在这里http://code.google.com/p/android-s ...

  10. java web api接口调用

    Web Services 被W3C进行了标准化定义. Web Services 发布到网上,可以公布到某个全局注册表,自动提供服务URL,服务描述.接口调用要求.参数说明以及返回值说明.比如中国气象局 ...