只用CSS修改radio的原点样式

最新推荐文章于 2024-06-24 09:25:01 发布

原创最新推荐文章于 2024-06-24 09:25:01 发布 · 9.3k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何仅通过CSS来改变HTML radio按钮的默认样式，通过创建两个label，一个与input结合，另一个用于显示自定义内容，实现视觉效果的改进。

需要两个label，第一个label配合input，第2个label才是input的内容

HTML：

<input checked type="radio" id="radio-1" name="radio-1-set" class="regular-radio"/>
<label for="radio-1"></label>
<label class="inputlabel" for="radio-1">微信支付</label>

CSS：

         .regular-radio {
            display: none;
        }

        .regular-radio + label {
            -webkit-appearance: none;
            background-color: RGB(248,248,249);
            padding: 9px;
            border-radius: 50px;
            /*padding: .09rem;
            border-radius: .5rem;*/
            display: inline-block;
            position: relative;
        }

        .regular-radio:checked + label:after {
            content: ' ';
            width: 12px;
            height: 12px;
            border-radius: 50px;
            position: absolute;
            top: 3px;
            background: #E72F17;
            text-shadow: 0px;
            left: 3px;
            font-size: 32px;
        }

        .regular-radio:checked + label {
            background-color: #e9ecee;
        }