본문 바로가기
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%; }