반응형
<input type="checkbox" id="click" checked><label for="click"><span></span>체크박스</label>
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label span {
display: inline-block;
width: 22px;
height: 22px;
margin: -2px 10px 0 0;
vertical-align: middle;
border-radius: 5px;
cursor: pointer;
border: 1px solid red;
}
input[type="checkbox"]:checked + label span {
background: red;
}
반응형
'html & css3' 카테고리의 다른 글
[html/css] 대시보드 좌측 사이드 메뉴 기본 포멧 (1) | 2021.02.20 |
---|---|
[html/css] 구글폰트/웹폰트 연결하기, 직접 폰트 변환하여 적용하기 (0) | 2020.11.30 |
[웹디자인/html/css] 웹호스팅에 파일 업로드하기 / 필수 확인 사항들 (0) | 2020.11.29 |
@keyframes 과 animation 속기형/animation-direction (0) | 2020.11.23 |
[html/css] 페이지 로딩 애니메이션 만들기 @keyframes/hue-rotate/infinite 속성 등 (0) | 2020.11.22 |