프로젝트를 진행하다보면 컨셉에 따라 체크박스의 기본 디자인 대신에 다른 디자인으로 변경해야 하는 경우가 있다. 그래서 input태그의 checkbox를 커스텀하는 방법에 대해 정리해보았다.
⭐ 주요 포인트
input 태그의 id, 와 label태그의 for 에 같은 값을 할당해야 label 클릭 시 input 체크에 영향이 미친다.
checked 속성을 활용하여 체크 전 후 스타일링을 다르게 줄 수 있다.
Html
<div class="input_area">
<div class="flex_line">
<input
type="checkbox"
name="cate"
id="all"
value="all"
/>
<label for="all">전체</label>
</div>
</div>
Css
label{
cursor: pointer;
}
.input_area input[type="checkbox"] {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid #000;
appearance: none;
cursor: pointer;
}
.input_area input[type="checkbox"]:checked {
background: #000;
border: none;
}
See the Pen Untitled by pminsun (@pminsun) on CodePen.
'Css' 카테고리의 다른 글
scroll guide (0) | 2024.08.27 |
---|---|
웹 디바이스 별 해상도 반응형 분기점 (0) | 2024.08.26 |
메뉴호버시 서브메뉴(dropdown) 구현 (0) | 2024.08.26 |
스크롤 바 숨기기 & 커스텀 (4) | 2024.08.24 |
display : flex 정리 (0) | 2024.08.24 |