HTML使用纯css自定义radio单选按钮样式，可以随意改变风格（附源码）

最新推荐文章于 2025-06-07 15:37:18 发布

原创最新推荐文章于 2025-06-07 15:37:18 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

HTML5 同时被 2 个专栏收录

204 篇文章

订阅专栏

JQuery

23 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript创建具有自定义样式的Radio按钮，包括选中状态的视觉效果及交互功能，通过具体代码展示了如何改变默认样式并实现动态控制。

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

<div class="box">
    <input type="radio" name="item" value="1">
    <label for="item1"></label>
</div>

.box{
  height     : 0.6rem;
  display    : flex;
  align-items: center;
  position   : relative;
  line-height: 30px;
}
 input[type="radio"] {
    width  : 20px;
    height : 20px;
    opacity: 0;
    z-index: 999;
 }

  label {
      position     : absolute;
      left         : 5px;
      width        : 20px;
      height       : 20px;
      border-radius: 50%;
      border       : 1px solid #999;
      cursor       : pointer;
   }

            /*设置选中的input的样式*/
            /* + 是兄弟选择器,获取选中后的label元素*/
            input:checked+label {
                background-color: #07c160;
                border          : 1px solid #07c160;
            }

            /*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
            input:checked+label::after {
                position   : absolute;
                content    : "";
                width      : 5px;
                height     : 10px;
                top        : 3px;
                left       : 6px;
                border     : 2px solid #fff;
                border-top : none;
                border-left: none;
                transform  : rotate(45deg);
            }

js:获取到checked的状态

$('#item1').click(function(){
　　console.log($(this).prop('checked'))
})