有时候，我们自己定义一些公司项目内部用的组件时，会对浏览器的各种组件进行样式修改。这里主要说一下checkbox和radio组件的样式修改方式。
首先看看效果：
其实现原理就是将input隐藏，然后通过label指向input，对input和其伪元素进行样式修改。
我们先看看chechbox：
html：
立即学习“前端免费学习笔记（深入）”；
<input type="checkbox" id="check1" class="checkbox1" /><label for="check1"></label>
css:
.checkbox1 { display:none;}.checkbox1 + label { position:relative; padding:4px 9px; border:1px solid green; border-radius:3px;}.checkbox1:checked + label:after { position:absolute; content:'\2714'; font-size:14px; top:2px; left:3px; color:blue;}再来看看radio：
html：
<input type="radio" id="radio1" name="radio1-1" class="radio1" /><label for="radio1"></label><div class="" style="height:20px;"></div><input type="radio" id="radio2" name="radio1-1" class="radio1" /><label for="radio2">
对应css：
.radio1 { display:none;}.radio1 + label { position:relative; padding:6px 12px; border:1px solid red; border-radius:50%;}.radio1:checked + label:after{ position:absolute; top:6px; left:5px; content:''; width:15px; height:15px; font-size:32px; border-radius:50%; background-color:blue;}完整示例如下：
See the Pen 自定义浏览器元素组件样式 by 刘放 ( @brizer ) on CodePen .
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
