CSS
바꾸고 싶지만 바꾸기 귀찮은 체크 박스 스타일...
또 쓸 것 같아, 내가 적어 놓을게.괜찮네.
이런 느낌이에요.
실제로는 이만하다.
Sass 같은 변수가 돌아오면 좋아하는 크기일 거예요.
.scss 파일
$checkbox_height: 22px;
$checkbox_margin: 25px;
$c_white: #fff;
$c_gray: #eee;
$c_navy: #002b53;
.nice-checkbox {
/* hide checkbox */
input[type=checkbox] {
visibility: hidden;
}
float: left;
margin: 0 7px 7px 0;
position: relative;
label {
display: inline-block;
height: $checkbox_height;
background-color: $c_white;
border: 1px solid $c_gray;
border-radius: 2px;
cursor: pointer;
/* Checkbox text style */
position: relative;
margin-left: - $checkbox_margin;
padding: 0 7px 0 22px;
font-size: 12px;
color: $c_navy;
line-height: $checkbox_height;
}
/* Tick mark */
label:after {
content: "";
opacity: 0.2;
width: 9px;
height: 5px;
background: transparent;
border: 3px solid $c_navy;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: $checkbox_height/5;
left: 6px;
}
/* Hover state */
label:hover:after {
opacity: 0.5;
}
input[type=checkbox]:checked + label:after {
opacity: 1;
border-color: $c_white;
}
input[type=checkbox]:checked + label {
background-color: $c_navy;
color: $c_white;
border-radius: 3px;
font-weight: bold;
}
}
많은 복선상자를 라벨처럼 배열할 때가 좋을 수도 있다.
찾아보기 검사가 없습니다.
확인된 건 크롬뿐이니 사용 시 테스트 잊지 마세요.
→ http://workabroad.jp/posts/2065
Reference
이 문제에 관하여(CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shunwitter/items/35ff045a39ce9455106a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)