<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%; }
'CSS' 카테고리의 다른 글
table thead sticky 적용시 보더 투명해지면서 tbody 겹쳐 보일때 (0) | 2024.05.22 |
---|---|
VScode 디자이너를 위한 플러그인 세팅, CSS 위주 (0) | 2024.05.12 |
input date icon 달력 모양 바꾸기 (0) | 2024.05.08 |
animation 애니메이션 css (0) | 2024.05.05 |
header nav (0) | 2024.05.05 |