单选框、复选框美观的样式

最新推荐文章于 2025-10-21 13:00:29 发布

原创最新推荐文章于 2025-10-21 13:00:29 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端框架专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS来实现单选框和复选框的美观样式，包括利用背景图、HTML布局和CSS样式设计，提升表单元素的视觉效果。

1.背景图

这里写图片描述

2.html

<div class="check-wrappers">
    <span class="c-checkbox checked">
        <input type="radio" autocomplete="off" name="type" style="display:none;" value="1" checked="checked">
    </span>
    <span></span>
</div>

3.css

.c-checkbox.checked {
    background-position: -29px 0;
}
.c-checkbox {
    display: block;
    width: 25px;
    height: 25px;
    margin: 0 auto;
    background: url(/shop-cart.png) no-repeat 0 0;
    background-size: 60px 120px;
}