html - Sass::单选按钮设计

Question

我们有一个特定的要求，设计一个单选按钮，如下所示。

我试过 Material Design 单选按钮。但它没有内圈。

有人可以帮忙在 Sass/CSS 中设计一个像上面那样的单选按钮吗？

感谢您的帮助。

Answer 1

给你一个提示，你只需要为你的“假 radio ”应用正确的外观。

想法是让不透明度为 0 的 input[type=radio] 并使用未选中的样式显示下一个元素。然后使用 input:checked + <element>应用选中的样式

您需要这样的标记:

.pretty-radio {
    position: relative;
    margin-bottom: 10px;
}

.radio {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.radio-look {  
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid blue;
    border-radius: 50%;
    position: relative;
}

.radio-look:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    right: 5px;
    border: 1px solid blue;
    border-radius: 50%;
}

.radio:checked + .radio-look:after {
    background: blue; // or any other style you need
}

<div class="pretty-radio">
    <input type="radio" class="radio" name="my-radio">
    <span class="radio-look"></span>
    Radio text
</div>
<div class="pretty-radio">
    <input type="radio" class="radio" name="my-radio">
    <span class="radio-look"></span>
    Radio text 2
</div>