Sass ::ラジオボタンのデザイン

Question

以下に示すように、ラジオボタンを設計する特定の要件があります。

私は材料設計のラジオボタンを試してみました。しかし、それは内側の円を持っていません。

Sass/CSSで上記のようなラジオボタンを設計するのに役立つことがありますか？

あなたのお手伝いをお待ちしております。

Answer 1

ヒントを得るには、あなたの "偽のラジオ"に正しい外観を適用するだけです。

考え方は、不透明度0の[type = radio]を入力し、次の要素をチェックされていないスタイルで表示することです。あなたがこれまでに試してみました何

.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>