H5自定义更改checkbox、radio颜色，支持谷歌、火狐

亮晶晶的芋头

已于 2023-01-30 18:29:15 修改

阅读量2.2k

点赞数

分类专栏：前端 css 谷歌、火狐文章标签： css 前端 html

于 2023-01-30 18:19:32 首次发布

本文链接：https://blog.csdn.net/weixin_40597676/article/details/128806884

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

谷歌、火狐

1 篇文章 0 订阅

订阅专栏

jquery开发的项目，需要适配谷歌、火狐等一些通用浏览器，想要实现自定义多选框、单选框颜色。查了许多资料，提到的使用:before、:after来实现的，不能很好的适配火狐。
尝试多次后，找到了这个实现方法，分享给能用到的小伙伴。

想要的效果如图所示：

主要代码片段如下：

    /*复选框基本（未选中）的样式*/
	input[type="checkbox"]{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
		display: inline-block;
		vertical-align: middle;
		width: 16px;
		height: 16px;
		border-radius: 4px;
		background-image: url(images/icon-checked.png);
		background-size: 100% auto;
		box-sizing:border-box;
		background-position: 0 0;
		background-color: white;
		border:solid 1px #333;
	}

	/* 复选框鼠标按下时增加的样式 */
	input[type="checkbox"]:active{
		background-position: 0 -48px;
		background-color: #80A231;
		border: 0;
	}

	/*复选框选中后增加的样式*/
	input[type="checkbox"]:checked{
		background-position: 0 -48px;
		background-color: #80A231;
		border: 0;
	}
	
	/*复选框选中后增加的样式*/
	input[type="checkbox"]:checked:active{
		background-position: 0 -48px;
		background-color: #80A231;
		border: 0;
	}

	/*单选框基本（未选中）的样式*/
	input[type="radio"]{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
		display: block;
		width: 13px;
		height: 13px;
		border-radius: 50%;
		background-size: 100% auto;
		box-sizing:border-box;
		border:solid 1px #80A231;
	}

	/*单选按钮选中后增加的样式*/
	input[type="radio"]:checked:before{
		content:"";
		display: block;
		width: 9px;
		height: 9px;
		margin: 1px;
		border-radius: 10px;
		background-color: #80A231;
	}

可预览的demo可以访问纯css实现适配谷歌、火狐的自定义多选框、单选框颜色。