티스토리 뷰
HTML checkbox 디자인 커스텀하기
문제상황
디자인 시안을 받았는데 기본 체크박스가 아닌 다른 모양의 체크박스였다.
해결
기본 체크박스는 숨김 처리하고 label을 이용해 스타일을 만든다.
텍스트의 위치 조정을 위해 별도의 wrapper를 만들고 position relative를 설정해준다음,
text 요소의 position 은 absolute로 잡아 조정한다.
예시 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 기본 체크박스 디자인 숨김 */
.checkbox {
display: none;
}
/* 텍스트 위치 조정을 위한 wrapper */
.checkbox-wrap {
position: relative;
}
/* check되지 않았을 때 스타일 */
.checkbox+.checkbox-label {
display: inline-block;
cursor: pointer;
width: 20px;
height: 20px;
border: 1px solid #000000;
}
/* check되었을 때 스타일 */
.checkbox:checked+.checkbox-label {
background-color: blue;
}
/* checkbox 텍스트 */
.checkbox-text {
position: absolute;
top: 4px;
left: 28px;
display: inline-block;
}
</style>
</head>
<body>
<div class="checkbox-wrap">
<input type="checkbox" name="" id="checkbox" class="checkbox">
<label class="checkbox-label" for="checkbox"><span class="checkbox-text">텍스트</span></label>
</div>
</body>
</html>생각할 점
이거보다 좀더 좋은 방법이 있을까..? 체크박스나 라디오 박스는 실무에서 자주 사용할 테니 저장해놔야겠다.
사이트에서 자주 볼 수 있는 요소들은 미리 만들어 놓는 게 좋겠다.
'Programming > HTML & CSS' 카테고리의 다른 글
| HTML/CSS 네이밍 시 container와 wrapper의 차이 (3) | 2021.06.18 |
|---|---|
| 애니메이션 최적화 (Reflow, Repainting) (0) | 2020.12.22 |
| calc() 안에서 scss 변수 사용하기 (0) | 2020.12.08 |
| 스크롤바 숨기기(스크롤 기능은 살려두고 스크롤 바만 없애기) (0) | 2020.12.08 |
| box-sizing. border-box, content-box (0) | 2020.06.10 |
댓글