自定义input[type=radio]单选框样式

原创于 2017-01-17 16:49:38 发布 · 5.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#input #单选框

前端开发同时被 2 个专栏收录

9 篇文章

订阅专栏

html/css

3 篇文章

订阅专栏

本文展示了如何使用HTML和CSS自定义input[type=radio]单选框的样式，通过提供的代码示例，轻松实现单选框的视觉优化。后续会探讨复选框的样式定制。

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

先看效果：
这里写图片描述

html结构：

<p>数据是否一致：
    <label class="radiobox"><input name="currentRadio" type="radio">是</label>
    <label class="radiobox"><input name="currentRadio" type="radio" >否</label>
</p>

css样式：

.radiobox
{
    position: relative;
    padding-left: 8px;
}
.radiobox:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #999;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: -2px;
    left: 6px;
}
input[type=radio]:checked:before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #999;
    position: absolute;
    top: 4px;
    left: 12px;
}
input[type=radio]{
    margin-right: 6px;
}