<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>테스트</title>
<style>
.checks {
display:inline-block;
position: relative;
padding:0px;
/* border:1px solid #000; */
}
.checks input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip:rect(0,0,0,0);
border: 0
}
.checks input[type="checkbox"] + label {
display: inline-block;
position: relative;
font-size:14px;
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
border:1px solid #000;
}
.checks input[type="checkbox"] + label:before { /* 가짜 체크박스 */
content: ' ';
display: inline-block;
width: 20px; /* 체크박스의 너비를 지정 */
height: 20px; /* 체크박스의 높이를 지정 */
line-height: 20px; /* 세로정렬을 위해 높이값과 일치 */
margin: -2px 8px 0 0;
text-align: center;
vertical-align: middle;
background:url(/imgs/input_checkbox.png) no-repeat 0 0;
}
.checks input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */
background-position: 0 -30px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!--[if lte IE 8]>
<script src="/js/poly-checked.min.js"></script>
<![endif]-->
</head>
<body>
<div class="checks">
<input type="checkbox" id="ex_chk">
<label for="ex_chk">체크박스</label>
</div>
<div class="checks">
<input type="checkbox" id="ex_chk2">
<label for="ex_chk2">농구</label>
</div>
</body>
</html>
'기존카테고리 > CSS' 카테고리의 다른 글
| CSS :nth-of-type() Selector (0) | 2018.03.16 |
|---|---|
| 체크박스1 (0) | 2018.03.15 |
| float 아래 콘텐츠 안밀려올라가기 (0) | 2018.03.10 |
| Left 높이(100%) 만들기 + 부모 넓이 인식시키기 (0) | 2018.03.10 |
| Div 간격이 있을 경우 font-size:0; 를 준다. (0) | 2018.02.01 |