利用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 自动安装工具 setuptools(easy_install) 的使用

    1.下载安装 python 安装工具,下载地址:http://pypi.python.org/pypi/setuptools ,可以找到正确的版本进行下载. 2.解压缩后双击 ez_setup.py ...

  2. LeetCode 367.有效的完全平方数（C++）

    给定一个正整数 num,编写一个函数,如果 num 是一个完全平方数,则返回 True,否则返回 False. 说明:不要使用任何内置的库函数,如  sqrt. 示例 1: 输入:16 输出:True ...

  3. 数据结构之C语言模拟整数数组实现

    #include <stdio.h> #include <malloc.h> #include <stdlib.h> typedef struct Arr { in ...

  4. VB.NET中的模块

    在C#中有“静态类”的概念,自然里边全部的方法都是静态的.这意味着你可以直接通过"类名.方法名"去调用(例如System的Math类就是典型).在VB.NET中,没有“静态类”的概 ...

  5. MySQL锁行锁表

    select..for update; 给数据库表手动上锁 --锁行Begin; for update; --给 id=1 的行加上排它锁且 id 有索引 ; Commit; -- 锁表 BEGIN; ...

  6. Spring课程 Spring入门篇 2-1 IOC和bean容器

    课程链接: 本节讲了5部分内容,6为项目demo: 1 接口及面向接口编程 2 什么是IOC 3 Spring的bean配置 4 Bean的初始化 5 Demo 自己理解: 1 高层模块和底层模块都依 ...

  7. maven课程 项目管理利器-maven 5-1 课程总结 1星（2018-11-08 07:19）

    1 maven windows环境搭建和配置环境变量 2 maven骨架和pom.xml 解析 3 命令行窗口常用的maven命令 4 仓库和坐标 5 maven Java项目 6 生命周期,依赖聚合 ...

  8. 从零开始的全栈工程师——js篇2.19（BOM）

    一.BOM 浏览器对象模型 1.window.open(url,ways) url 是打开的网页地址ways 打开的方式 _self 2.window.close() 关闭当前页面 3.window. ...

  9. 在Git上创建新分支（实用性高！！！）

    在github上创建仓库: Create a new repository on the command line touch README.md git init git add README.md ...

  10. Visual Studio Code 入门教程

    Extensible and customizable.(可扩展的和可定制的,这是我喜欢它的原因) Want even more features? Install extensions to add ...