[HTML/CSS] 체크박스 커스텀
2023. 11. 29.ㆍ공부/HTML,CSS
728x90
HTML
<!-- 전체동의 체크박스 -->
<input type="checkbox" name="agree_all" id="agree_all" value="checkbox_all" onClick="selectAll(this);">
<!-- 개별 체크박스 -->
<input type="checkbox" class="checked" name="agree" id="agree1" value="checkbox1" tabindex="4" onclick="selectOne();">
<input type="checkbox" class="checked" name="agree" id="agree2" value="checkbox1" tabindex="4" onclick="selectOne();">
<input type="checkbox" class="checked" name="agree" id="agree3" value="checkbox1" tabindex="4" onclick="selectOne();">
<input type="checkbox" class="checked" name="agree" id="agree4" value="checkbox1" tabindex="4" onclick="selectOne();">
CSS
input[type="checkbox"] {
appearance: none;
width: 26px;
height: 26px;
background: url(../../images/common/check_default.png) no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked {
background-image: url(../../images/common/check_checked.png);
}
'공부 > HTML,CSS' 카테고리의 다른 글
[HTML/CSS] 뷰포트 중앙정렬하기 (0) | 2024.01.03 |
---|---|
[HTML/CSS] em과 rem (0) | 2023.12.02 |
[웹접근성] 적절한 대체 텍스트 제공 (1) | 2023.11.28 |
[HTML/CSS] Flex (2) | 2023.11.22 |
[HTML/CSS] 반응형 테이블 만들기 (0) | 2023.09.29 |