CSS
input radio 라디오버튼 모양 바꾸기
by 영감은어디에
2024. 5. 8.
<div>
시간대
<div class="selTimeRadio">
<label>
<input type="radio" name="selTime" checked>
<span>30분</span>
</label>
<label >
<input type="radio" name="selTime">
<span>15분</span>
</label>
</div>
</div>
.selTimeRadio input { border: 4px solid #A0A0A0; outline:none; width: 36px; height: 36px; background-color: transparent; border-radius: 50%; appearance: none; }
.selTimeRadio input:checked { border-color: #1CC8FF; position: relative }
.selTimeRadio input:checked::after { display: block; position: absolute; top: 6px; left: 6px; width: 16px; height: 16px; background-color: #1CC8FF; content: ''; border-radius: 50%; }