美化复选框样式，选中时改变其背景色

最新推荐文章于 2024-08-08 18:05:14 发布

笑格格

最新推荐文章于 2024-08-08 18:05:14 发布

阅读量1.8k

点赞数 1

分类专栏： jQuery 前端文章标签： css jquery css3

本文链接：https://blog.csdn.net/xiaogege2012/article/details/108172400

版权

本文介绍如何通过CSS和jQuery实现复选框的美化，使其在选中时背景色发生变化，提供美观的用户界面。提供了HTML、CSS和JS代码示例，用于获取选中的复选框值。

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

最近有一个项目需求，用类似复选框的选择方式来作为输入条件。但是外观要美观，不能看着像复选框。

于是，我便美化了复选框的样式，如下图所示：

选中的背景色都不同，根据自己需要自定义。

上代码，HTML

<div class="group">
        <input type="checkbox" value="one" name="check" id="checkbox_a1" class="chk_3" checked>
        <label for="checkbox_a1">选项1</label>
        <input type="checkbox" value="two" name="check" id="checkbox_a2" class="chk_4" checked>
        <label for="checkbox_a2">选项2</label>
        <input type="checkbox" value="three" name="check" id="checkbox_a3" class