css设置input单选radio多选checkbox样式

最近接手一个古老的项目，要修改里边的主题颜色，使用css的var方法一路轻松，最后在input的单选radio和多选checkbox被踩了刹车，也是有几年没做这种原始的项目手生了，最后经过几番折腾后，通过input的伪元素将其改造了，效果还不错在这里分享一下

未处理的样式

在这里插入图片描述

处理后的样式

在这里插入图片描述

主要代码部分

需要注意调整伪类:after和:before的尺寸和位置，根据项目的初始化样式调整, 主要适用于PC老项目

 /* 主要代码部分 ----------------------------- Start */
    /* ==================== 多选框 */
    input[type=checkbox] {
      font-size: 14px;
      width: 15px;
      height: 12px;
      position: relative;
      vertical-align: middle;
      margin-right: 4px;
    }
 
    input[type=checkbox]:after {
      position: absolute;
      width: 10px;
      height: 15px;
      top: -2px;
      content: " ";
      background-color: #f4edfd;
      color: #fff;
      display: inline-block;
      visibility: visible;
      padding: 0px 3px;
      border-radius: 3px;
      border: 1px solid #cccfd5;
    }
 
    /* checkbox选中样式 */
    input[type=checkbox]:checked:after {
      background-color: #9b23ea;
      border-color: #9b23ea;
    }
 
    input[type=checkbox]:checked:before {
      content: "✓";
      display: block;
      position: relative;
      top: -5px;
      left: 4px;
      color: #fff;
      font-weight: 900;
      z-index: 1;
      font-size: 14px;
    }
 
    /* ==================== 单选框 */
    input[type=radio] {
      font-size: 14px;
      width: 14px;
      height: 10px;
      position: relative;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 4px;
    }
 
    input[type=radio]:after {
      position: absolute;
      width: 8px;
      height: 14px;
      left: -1px;
      top: -1px;
      content: " ";
      background-color: #f4edfd;
      color: #fff;
      display: inline-block;
      visibility: visible;
      padding: 0px 3px;
      border-radius: 50%;
      border: 1px solid #cccfd5;
    }
 
    input[type=radio]:checked:after {
      border-color: #9b23ea;
    }
 
    input[type=radio]:checked:before {
      content: "";
      display: block;
      position: relative;
      top: 2px;
      left: 2px;
      width: 8px;
      height: 8px;
      background-color: #9b23ea;
      border-radius: 50%;
      z-index: 1;
    }
    /* 主要代码部分 ----------------------------- Start */复制

示例代码

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css设置input单选radio多选checkbox样式</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .box {
      width: 500px;
      margin: 10% auto;
    }
    /* 主要代码部分 ----------------------------- Start */
    /* ==================== 多选框 */
    input[type=checkbox] {
      font-size: 14px;
      width: 15px;
      height: 12px;
      position: relative;
      vertical-align: middle;
      margin-right: 4px;
    }
 
    input[type=checkbox]:after {
      position: absolute;
      width: 10px;
      height: 15px;
      top: -2px;
      content: " ";
      background-color: #f4edfd;
      color: #fff;
      display: inline-block;
      visibility: visible;
      padding: 0px 3px;
      border-radius: 3px;
      border: 1px solid #cccfd5;
    }
 
    /* checkbox选中样式 */
    input[type=checkbox]:checked:after {
      background-color: #9b23ea;
      border-color: #9b23ea;
    }
 
    input[type=checkbox]:checked:before {
      content: "✓";
      display: block;
      position: relative;
      top: -5px;
      left: 4px;
      color: #fff;
      font-weight: 900;
      z-index: 1;
      font-size: 14px;
    }
 
    /* ==================== 单选框 */
    input[type=radio] {
      font-size: 14px;
      width: 14px;
      height: 10px;
      position: relative;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 4px;
    }
 
    input[type=radio]:after {
      position: absolute;
      width: 8px;
      height: 14px;
      left: -1px;
      top: -1px;
      content: " ";
      background-color: #f4edfd;
      color: #fff;
      display: inline-block;
      visibility: visible;
      padding: 0px 3px;
      border-radius: 50%;
      border: 1px solid #cccfd5;
    }
 
    input[type=radio]:checked:after {
      border-color: #9b23ea;
    }
 
    input[type=radio]:checked:before {
      content: "";
      display: block;
      position: relative;
      top: 2px;
      left: 2px;
      width: 8px;
      height: 8px;
      background-color: #9b23ea;
      border-radius: 50%;
      z-index: 1;
    }
    /* 主要代码部分 ----------------------------- Start */
  </style>
</head>
 
<body>
  <div class="box">
    <div>
      <h2>地区</h2>
      <ul>
        <li><label><input type="radio" name="address" value="1">北京</label></li>
        <li><label><input type="radio" name="address" value="2">上海</label></li>
        <li><label><input type="radio" name="address" value="3">广州</label></li>
        <li><label><input type="radio" name="address" value="5">深圳</label></li>
        <li><label><input type="radio" name="address" value="5">杭州</label></li>
      </ul>
    </div>
    <div>
      <h2>爱好</h2>
      <ul>
        <li><label><input type="checkbox" name="hobby" value="1">跑步</label></li>
        <li><label><input type="checkbox" name="hobby" value="2">钓鱼</label></li>
        <li><label><input type="checkbox" name="hobby" value="3">爬山</label></li>
        <li><label><input type="checkbox" name="hobby" value="4">游泳</label></li>
        <li><label><input type="checkbox" name="hobby" value="5">骑行</label></li>
      </ul>
    </div>
  </div>
</body>
 
</html>复制

该操作只适用于最原始的项目，最佳处理方案还是用自定义的替换，或者用个组件库layui之类的，现在vue或react这些基本都直接使用element或antd这些也基本上用不上这些了，使用过程有问题欢迎留言交流

最后一个问题

原生select在不自定义的情况下怎么能修改option的hover样式，目前还没找到任何能设置的方式在这里插入图片描述

css设置input单选radio多选checkbox样式

未处理的样式

处理后的样式

主要代码部分

示例代码

最后一个问题

HTML && CSS

DOM算法系列009-判断给定节点是否为块级元素

css3的新特性有哪些？

[ HTML5 CSS3 ] HTML基础入门详细教程

将html字符串转换成html标签显示到页面上（转）

html5 和 css3 新特性

HTML5和CSS3新增特性

【CSS3】Flex弹性布局

CSS 轻松实现水平与垂直居中

css - flex布局实现div横向滚动

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	/* 主要代码部分 ----------------------------- Start */
	/* ==================== 多选框 */
	input[type=checkbox] {
	font-size: 14px;
	width: 15px;
	height: 12px;
	position: relative;
	vertical-align: middle;
	margin-right: 4px;
	}

	input[type=checkbox]:after {
	position: absolute;
	width: 10px;
	height: 15px;
	top: -2px;
	content: " ";
	background-color: #f4edfd;
	color: #fff;
	display: inline-block;
	visibility: visible;
	padding: 0px 3px;
	border-radius: 3px;
	border: 1px solid #cccfd5;
	}

	/* checkbox选中样式 */
	input[type=checkbox]:checked:after {
	background-color: #9b23ea;
	border-color: #9b23ea;
	}

	input[type=checkbox]:checked:before {
	content: "✓";
	display: block;
	position: relative;
	top: -5px;
	left: 4px;
	color: #fff;
	font-weight: 900;
	z-index: 1;
	font-size: 14px;
	}

	/* ==================== 单选框 */
	input[type=radio] {
	font-size: 14px;
	width: 14px;
	height: 10px;
	position: relative;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 4px;
	}

	input[type=radio]:after {
	position: absolute;
	width: 8px;
	height: 14px;
	left: -1px;
	top: -1px;
	content: " ";
	background-color: #f4edfd;
	color: #fff;
	display: inline-block;
	visibility: visible;
	padding: 0px 3px;
	border-radius: 50%;
	border: 1px solid #cccfd5;
	}

	input[type=radio]:checked:after {
	border-color: #9b23ea;
	}

	input[type=radio]:checked:before {
	content: "";
	display: block;
	position: relative;
	top: 2px;
	left: 2px;
	width: 8px;
	height: 8px;
	background-color: #9b23ea;
	border-radius: 50%;
	z-index: 1;
	}
	/* 主要代码部分 ----------------------------- Start */

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>css设置input单选radio多选checkbox样式</title>
	<style>
	*{
	padding: 0;
	margin: 0;
	}
	.box {
	width: 500px;
	margin: 10% auto;
	}
	/* 主要代码部分 ----------------------------- Start */
	/* ==================== 多选框 */
	input[type=checkbox] {
	font-size: 14px;
	width: 15px;
	height: 12px;
	position: relative;
	vertical-align: middle;
	margin-right: 4px;
	}

	input[type=checkbox]:after {
	position: absolute;
	width: 10px;
	height: 15px;
	top: -2px;
	content: " ";
	background-color: #f4edfd;
	color: #fff;
	display: inline-block;
	visibility: visible;
	padding: 0px 3px;
	border-radius: 3px;
	border: 1px solid #cccfd5;
	}

	/* checkbox选中样式 */
	input[type=checkbox]:checked:after {
	background-color: #9b23ea;
	border-color: #9b23ea;
	}

	input[type=checkbox]:checked:before {
	content: "✓";
	display: block;
	position: relative;
	top: -5px;
	left: 4px;
	color: #fff;
	font-weight: 900;
	z-index: 1;
	font-size: 14px;
	}

	/* ==================== 单选框 */
	input[type=radio] {
	font-size: 14px;
	width: 14px;
	height: 10px;
	position: relative;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 4px;
	}

	input[type=radio]:after {
	position: absolute;
	width: 8px;
	height: 14px;
	left: -1px;
	top: -1px;
	content: " ";
	background-color: #f4edfd;
	color: #fff;
	display: inline-block;
	visibility: visible;
	padding: 0px 3px;
	border-radius: 50%;
	border: 1px solid #cccfd5;
	}

	input[type=radio]:checked:after {
	border-color: #9b23ea;
	}

	input[type=radio]:checked:before {
	content: "";
	display: block;
	position: relative;
	top: 2px;
	left: 2px;
	width: 8px;
	height: 8px;
	background-color: #9b23ea;
	border-radius: 50%;
	z-index: 1;
	}
	/* 主要代码部分 ----------------------------- Start */
	</style>
	</head>

	<body>
	<div class="box">
	<div>
	<h2>地区</h2>
	<ul>
	<li><label><input type="radio" name="address" value="1">北京</label></li>
	<li><label><input type="radio" name="address" value="2">上海</label></li>
	<li><label><input type="radio" name="address" value="3">广州</label></li>
	<li><label><input type="radio" name="address" value="5">深圳</label></li>
	<li><label><input type="radio" name="address" value="5">杭州</label></li>
	</ul>
	</div>
	<div>
	<h2>爱好</h2>
	<ul>
	<li><label><input type="checkbox" name="hobby" value="1">跑步</label></li>
	<li><label><input type="checkbox" name="hobby" value="2">钓鱼</label></li>
	<li><label><input type="checkbox" name="hobby" value="3">爬山</label></li>
	<li><label><input type="checkbox" name="hobby" value="4">游泳</label></li>
	<li><label><input type="checkbox" name="hobby" value="5">骑行</label></li>
	</ul>
	</div>
	</div>
	</body>

	</html>

css设置input单选radio多选checkbox样式

未处理的样式

处理后的样式

主要代码部分

示例代码

最后一个问题

微信扫一扫：分享