Sass :: 라디오 버튼 디자인

Question

아래에 표시된 것과 같이 라디오 버튼을 디자인해야한다는 특정 요구 사항이 있습니다.

나는 소재 디자인 라디오 버튼을 시도했습니다. 그러나 그것은 내부 원이 없습니다.

Sass/CSS에서 위와 같은 라디오 버튼을 디자인하는 데 도움이 될 수 있습니까?

감사합니다.

Answer 1

힌트를주기 위해 "가짜 라디오"에 올바른 모양을 적용하기 만하면됩니다.

아이디어는 [유형 = 라디오]에 불투명도 0을 입력하고 다음 요소를 선택되지 않은 스타일로 표시하는 것입니다.

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