利用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. android Activity启动过程(三)从栈顶Activity的onPause到启动activityon的Resume过程

    ActivityStack.startPausingLocked() IApplicationThread.schudulePauseActivity() ActivityThread.sendMes ...

  2. 二叉搜索树-php实现 插入删除查找等操作

    二叉查找树(Binary Search Tree),(又:二叉搜索树,二叉排序树)它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的 ...

  3. Spring boot-(3) Spring Boot特性1

    本节将深入Spring Boot的细节,可以学到你想使用的或定制的Spring Boot的主要特性. 1. SpringApplication SpringApplication类为引导一个Sprin ...

  4. output引用类型

    1.创建存储过程,将参数avg设置为引用参数,可以对参数有反馈作用 ), @avg float output) as select @avg=AVG(price) from goods where g ...

  5. SpringBoot JPA注解详解

    1.@OneToOne 2.@OneToManytargetEntity: 默认关联的实体类型.如果集合类中指定了具体类型了,不需要使用targetEntity.否则需要targetEntity指定C ...

  6. Spring课程 Spring入门篇 4-2 Spring bean装配（下）之Autowired注解说明1

    课程链接: 1 解析 2 代码演练 1 解析 1.1 @Required注解 该注解适用于bean属性的set方法 1.2 @Autowired 作用: 是为了把依赖的对象,自动的注入到bean里 使 ...

  7. Java中的各种锁

    .共享锁和排它锁的区别

  8. JSON FILE NOT FOUND?

    (WIN7+IIS7) 搞一个小测试,一个小程序,用一个JSON文件来显示数据, 用HTML 访问是完全没有问题的,可是一放到IIS下,就出现无法访问, CONSOLE:提示  NOT FOUND 原 ...

  9. typedef struct 与 struct

    学c++之前最好先学c.特别要说的是,一些虽然冠名为c++的项目的文件中却大部分都是c的代码. 比如我们这个例子: 在c语言中,定义一个结构体和其实适合c++中有区别的.比如我们有如下的代码: str ...

  10. ReactNative-JS 调用原生方法实例代码(转载)

    第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture;   import android.content.Con ...