HTML+CSS如何实现单选框、复选框美观的样式

要成功,就要长期等待而不焦躁,态度从容却保持敏锐,不怕挫折且充满希望。早安!减少蜗居时间,亲近大自然。

1.背景图

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>

css

.cart-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;
}

以上所述是小编给大家介绍的HTML+CSS实现单选框、复选框美观的样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

本文HTML+CSS如何实现单选框、复选框美观的样式到此结束。七月盛夏,瓦蓝瓦蓝的天空没有一丝云彩,火热的太阳炙烤着大地,河里的水烫手,地里的土冒烟。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例