Inputチェックボックスの美化
12881 ワード
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
.checkbox-group{
margin-bottom: 30px;
}
.checkbox{
cursor: pointer;
user-select: none;
}
.checkbox input{
display: none;
}
.checkbox span{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
vertical-align: middle;
text-align: center;
}
.checkbox span:after{
display: block;
content: "";
}
.checkbox.checked{
color: rgb(0, 174, 255);
}
.checkbox.checked span{
border-color: rgb(0, 174, 255);
color: white;
}
.checkbox.checked span:after{
content: "√";
background-color: rgb(0, 174, 255);
}
.checkbox.disabled{
opacity: .5;
cursor: not-allowed;
}
style>
head>
<body>
<label>
<input type="checkbox">
label>
<script>
var checkboxs = document.querySelectorAll("[type='checkbox']");
for(var i=0;i<checkboxs.length;i++){
var checkbox = checkboxs[i];
checkbox.onclick = function(e){
e.stopPropagation();// input
}
var label = checkbox.parentNode;
var span = document.createElement('span');
label.insertBefore(span,checkbox);
label.className = 'checkbox';
label.onclick = function(){
var labelName = this.className;
if(labelName.indexOf('disable')>-1){
return;
}
if(labelName.indexOf('checked')>-1){
this.className = 'checkbox';
}else{
this.className = 'checkbox checked';
}
}
}
script>
body>
html>