html radio样式美化

最新推荐文章于 2025-06-13 11:13:44 发布

原创最新推荐文章于 2025-06-13 11:13:44 发布 · 4.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #支付 #radio

html5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用自定义切图来美化Radio按钮样式的HTML和CSS实现方法，并通过支付方式的选择作为实例进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

radio用自定义切图来美化样式，demo是选择支付方式，如果是文字的话把img标签换成span即可。

html代码：

同一类的，name要统一，设置成一样。

css代码：

.order-payicon{
	width: 760px;
	height: 62px;
}
input[type="radio"] {
    display: none;
    visibility: hidden;
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
}
input[type="radio"]+label {
    background: url(../img/check_u.png) no-repeat;
    background-size: 34px 62px;
    vertical-align: middle;
    height: 62px;
    width: 34px;
    display: inline-block;
}
input[type="radio"]+label+img {
    padding-right: 25px;
}
input[type="radio"]:checked+label {
    background: url(../img/check_d.png) no-repeat;
    background-size: 34px 62px;
}

未选中时的按钮：