728x90
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="../reset.css">
<title>Document</title>
</head>
<body>
<!-- 움직이는 ON/OFF 버튼 -->
<div class="check_wrap">
<h1>체크 박스</h1>
<div class="check_form">
<input type="checkbox" id="check1" name="" value="">
<label for="check1"></label>
</div>
<div class="check_form">
<input type="checkbox" id="check2" name="" value="">
<label for="check2"></label>
</div>
</div>
<!-- 이미지로 체크박스 변경 -->
<div class="check_wrap">
<h1>이미지 체크 박스</h1>
<div class="check_form2">
<input type="checkbox" id="checkimg1" name="" value="">
<label for="checkimg1">체크박스</label>
</div>
<div class="check_form2">
<input type="checkbox" id="checkimg2" name="" value="">
<label for="checkimg2">체크박스</label>
</div>
</div>
<!-- 이미지로 라디오버튼 변경 -->
<div class="check_wrap">
<h1>라디오 체크 박스</h1>
<div class="radio_form">
<input type="radio" id="radioimg1" name="radio_form" value="">
<label for="radioimg1">선택1</label>
</div>
<div class="radio_form">
<input type="radio" id="radioimg2" name="radio_form" value="">
<label for="radioimg2">선택2</label>
</div>
<div class="radio_form">
<input type="radio" id="radioimg3" name="radio_form" value="">
<label for="radioimg3">선택3</label>
</div>
</div>
</body>
</html>css
@charset "utf-8";
/* 움직이는 ON/OFF 버튼 */
.check_wrap{
margin: 100px;
}
.check_form,
.check_form2,
.radio_form{
margin: 20px;
}
.check_form input,
.check_form2 input,
.radio_form input{
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
opacity: 0;
}
.check_form label::before{
content: '';
display: block;
position: absolute;
height: 19px;
width: 19px;
border-radius: 50%;
background-color: #fff;
top: 1px;
left: 1px;
}
.check_form label{
position: relative;
width: 36px;
height: 21px;
background: #666;
border-radius: 10px;
overflow: hidden;
color: transparent;
display: inline-block;
}
.check_form input:checked + label{
background-color: limegreen;
}
.check_form input:checked + label::before{
left: auto;
right: 1px;
}
/* 이미지로 체크박스 변경 */
.check_form2 label::before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin: -4px 5px 0 0;
background: url("checkbox.png") no-repeat 0 0;
background-size: 20px;
}
.check_form2 input:checked + label::before{
background-image: url("checkbox_on.png");
}
/* 이미지로 라디오 변경 */
.radio_form label::before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin: -4px 5px 0 0;
background: url("radio.png") no-repeat 0 0;
background-size: 20px;
}
.radio_form input:checked + label::before{
background-image: url("radio_on.png");
}
728x90
'HMTL & CSS' 카테고리의 다른 글
| 반응형 예제시안 (가로모드 적용버전) (0) | 2020.09.07 |
|---|---|
| 파일첨부 소스코드 (0) | 2020.09.02 |
| 레이어팝업 만들기 [ Layer Popup ] (0) | 2020.09.01 |
| 달력 UI제작 (웹접근성 코드) (0) | 2020.08.28 |
| 썸네일 이미지 목록 - 2 (0) | 2020.08.24 |