【HTML】radio和checkbox样式美化

最新推荐文章于 2025-10-10 10:42:45 发布

原创最新推荐文章于 2025-10-10 10:42:45 发布 · 6.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#checkbox radio 美化样式

CSS学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用HTML与CSS实现自定义样式的单选框与复选框的方法。通过特殊的样式设置，可以改变默认的输入元素外观，使其符合特定的设计需求。文章提供了具体的代码实例，包括如何定义不同状态下的背景图片位置。

仅提供记录，怕忘记了

效果图：

<span style="font-size:14px;"><span class="radio-span">
  <input type="radio" name="" value="0" checked="checked" class="radioClass"/>
</span>

<div class="check-custom">
  <input class="radioClass" type="checkbox" name="integral" value="1"/>
</div>

样式
.radio-span {
    width: 24px;
    height: 18px;
    padding-top: 3px;
    cursor: pointer;;
    text-align: center;
    margin-right: 10px;
    background-image: url(../image/inputradio.gif);
    background-repeat: no-repeat;
    background-position: -24px 0;
    display: inline-block;
    vertical-align: middle;
}
.radio-span > input {
    display: inline-block;
}
.on {
    background-position: 0 0;
}
.radioClass {
    opacity: 0;
    cursor: pointer;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

.check-custom {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 10px;
    text-align: center;
    background-image: url(../image/checkbox_01.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    display: inline-block;
    margin-right: 5px;
}

.check-on {
    background-position: 0 -21px;
}
</span>