CSS组件之CheckBox自定义样式

最新推荐文章于 2023-04-16 21:49:27 发布

几声安好

最新推荐文章于 2023-04-16 21:49:27 发布

阅读量770

点赞数

分类专栏：个人笔记文章标签： css html 前端自定义checkbox

本文链接：https://blog.csdn.net/qq_35533595/article/details/82663475

版权

本文介绍了如何通过CSS实现CheckBox的自定义样式，以满足现代设计需求。文章提供了一个HTML结构示例，并展示了对应的CSS代码，帮助开发者轻松改变CheckBox的外观。

摘要由CSDN通过智能技术生成

本文主要是通过CSS实现如何自定义CheckBox的自定义样式。

在项目的开发过程中难免会经常遇到需要自定义CheckBox的样式问题，原生的CheckBox样式实在是很难符合现代人越来越高的审美观。今天在项目的开发过程中又遇到了这个问题，索性直接将代码记录下来，方便后续使用。

首先是html代码如下：

<div class="box-list">
	<div class="opt">
		<input class="magic-checkbox" type="checkbox" name="layout" id="c1">
		<label for="c1">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c2">
		<label for="c2">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c3">
		<label for="c3">Normal</label>
		<input class="magic-checkbox" type="checkbox" name="layout" id="c4">