Sass ::单选按钮设计

我们有具体要求设计一个单选按钮，如下所示。Sass ::单选按钮设计

我试图材料设计单选按钮。但它没有内圈。

有人可以帮助设计一个像Sass/CSS上面的单选按钮。

感谢您的帮助。

来源

2017-09-26 Ram

你尝试过这么远吗？ –

我的应用程序不是一个建立在jquery中的角度js应用程序。我试图设计一个材料单选按钮，只是提取物质单选按钮设计的CSS，并做了一些tweeks。但我无法创建一个内部圈子。 – Ram

角度？好吧，检查我的答案，并让我知道，如果它可以帮助你 –

给你一个提示，你只需要正确的看看你的“假收音机”。

这个想法是让不透明度为0的输入[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>

来源

2017-09-26 08:58:10

感谢您的快速响应。但是如果单选按钮没有被选中，我需要另一个圆圈。就像图像中显示的那样（单选按钮1）。那是我坚持的地方。 – Ram

检查我的编辑，你可以使用一个绝对的伪元素：之后或：之前（我会让你只是玩颜色） –

Sass ::单选按钮设计

回答

相关问题