<!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 input + span {
display: inline-block;
width: 50px;
height: 50px;
background: red;
}
.checks input:checked + span {
background: blue;
} */
.asas {
-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 {
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;
padding-left: 50px; /* 글자와 체크박스 사이의 간격을 변경 */
font-size:30px;
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: ' ';
position: absolute;
left: 0;
top: 00px; /* 이 값을 변경해서 글자와의 정렬 */
width: 40px; /* 체크박스의 너비를 지정 */
height: 40px; /* 체크박스의 높이를 지정 */
line-height: 40px; /* 세로정렬을 위해 높이값과 일치 */
margin: -2px 8px 0 0;
text-align: center;
vertical-align: middle;
background: #fafafa;
border: 1px solid #cacece;
border-radius : 3px;
box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
}
.checks input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.checks input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */
content: '\2714'; /* 체크표시 유니코드 사용 */
color: #99a1a7;
text-shadow: 1px 1px #fff;
background: #e9ecee;
border-color: #adb8c0;
box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</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>
<div class="asas">
The text of this div element cannot be selected. If you double-click me, my text will not be highlighted.
</div>
</body>
</html>
'기존카테고리 > CSS' 카테고리의 다른 글
| CSS :nth-of-type() Selector (0) | 2018.03.16 |
|---|---|
| 체크박스2 (0) | 2018.03.15 |
| float 아래 콘텐츠 안밀려올라가기 (0) | 2018.03.10 |
| Left 높이(100%) 만들기 + 부모 넓이 인식시키기 (0) | 2018.03.10 |
| Div 간격이 있을 경우 font-size:0; 를 준다. (0) | 2018.02.01 |