利用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. RestTemplate中几种常见的请求方式

    GET请求 第一种:getForEntity getForEntity方法的返回值是一个ResponseEntity<T>,ResponseEntity<T>是Spring对H ...

  2. iOS-swift-函数和闭包

    一.函数 关键字:func 参数列表用 , 分割 使用 -> 分割参数和返回值 func greet(person: String, day: String) -> String { re ...

  3. Java笔记 —— 初始化

    Java笔记 -- 初始化 h2{ color: #4ABCDE; } a{ text-decoration: none !important; } a:hover{ color: red !impo ...

  4. SaaS “可配置”和“多租户”架构的几种技术实现方式

    1.数据存储方式的选择 多租户(Multi-Tenant ),即多个租户共用一个实例,租户的数据既有隔离又有共享,说到底是要解决数据存储的问题. 常用的数据存储方式有三种. 方案一:独立数据库   一 ...

  5. Java —异常

    异常简介 有异于常态,和正常情况不一样,有错误出现,阻止当前方法或作用域,称为异常. Java中的异常类都继承Throwable类,它有两个子类:Error和Exception.Error很少接触,主 ...

  6. JDBC中重要的类/接口-Connection、DriverManager、ResultSet、Statement及常用方法

    DriverManager(管理一组 JDBC 驱动程序的基本服务) 它的方法: getConnection(String url, String user, String password) 试图建 ...

  7. IPV4基本知识介绍

    转自华为官网 1.1  介绍 定义 IPv4(Internet Protocol Version 4)协议族是TCP/IP协议族中最为核心的协议族.它工作在TCP/IP协议栈的网络层,该层与OSI参考 ...

  8. Microsoft EDP（enterprise database protection）配置策略中的三种Rule template

    搭建Microsoft EDP环境: Microsoft 10 insider preview,Microsoft Intune,ie10(要安装插件silverlight) 这里暂时只说在进行配置策 ...

  9. April 10 2017 Week 15 Monday

    He alone is poor who does not possess knowledge. 没有知识,才是贫穷. Knowledge, as a important part of wisdom ...

  10. leetcode： 哈希——two-sum，3sum，4sum

    1). two-sum Given an array of integers, find two numbers such that they add up to a specific target ...