checkbox styling in css
HTML:
<h1>Styled Checkbox</h1>
<div class="modal-1">
<div class="checkbox inline">
<input type="checkbox" checked>
<label>Option 1</label>
</div>
<div class="checkbox inline">
<input type="checkbox" >
<label>Option 2</label>
</div>
</div>
<div class="modal-2">
<div class="checkbox inline">
<input type="checkbox" checked>
<label>Option 1</label>
</div>
<div class="checkbox inline">
<input type="checkbox" >
<label>Option 2</label>
</div>
</div>
<div class="modal-3">
<div class="checkbox inline">
<input type="checkbox" checked>
<label>Option 1</label>
</div>
<div class="checkbox inline">
<input type="checkbox" >
<label>Option 2</label>
</div>
</div>
<div class="modal-4">
<div class="checkbox inline">
<input type="checkbox" checked>
<label>Option 1</label>
</div>
<div class="checkbox inline">
<input type="checkbox" >
<label>Option 2</label>
</div>
</div>
CSS:
*, *:after, *:before{
box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
body{text-align:center; background:#efefef}
h1{font-family:arial; color:#12B555}
.inline{
display: inline-block;
}
.inline + .inline{
margin-left:10px;
}
[class*="modal"]{
margin:25px ;
}
/*==================================*/
.checkbox{
color:#999;
font-size:15px;
position:relative;
}
.checkbox label{
position:relative;
padding-left:20px;
}
.checkbox label:before{
background:#acb5ba;
content: "";
height: 15px;
left: 0;
position: absolute;
top: 1px;
width: 15px;
border-radius:4px;
}
.checkbox label:after{
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
content: "";
height: 9px;
left: 6px;
position: absolute;
top: 3px;
width: 4px;
transform: rotate(40deg);
-ms-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.checkbox input[type="checkbox"]{
cursor: pointer;
position:absolute;
width:100%;
height:100%;
z-index: 1;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}
.checkbox input[type="checkbox"]:hover + label:after{
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
border-color:#999;
}
.modal-1 .checkbox input[type="checkbox"]:hover + label:after{
border-color:#fff;
}
.checkbox input[type="checkbox"]:checked + label:after, .checkbox input[type="checkbox"]:checked + label:before{
opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.checkbox input[type="checkbox"]:checked + label:before{
background:#12B555;
}
.checkbox input[type="checkbox"]:checked + label{
color:#12B555;
}
/*===== Modal 2 ====*/
.modal-2 .checkbox label:before{
background:none;
border:2px solid;
}
.modal-2 .checkbox input[type="checkbox"]:checked + label:before, .modal-2 .checkbox input[type="checkbox"]:checked + label:after{
background:none;
border-color:#12B555;
}
/*===== Modal 3 ====*/
.modal-3 .checkbox label:before{
background:none;
border:2px solid;
border-radius:100%; -moz- border-radius:100%; -webkit- border-radius:100%;
}
.modal-3 .checkbox label:after{
width:6px;
height:15px;
top:-3px;
left:8px
}
.modal-3 .checkbox input[type="checkbox"]:checked + label:before, .modal-3 .checkbox input[type="checkbox"]:checked + label:after{
background:none;
border-color:#12B555;
}
/*===== Modal 4 ====*/
.modal-4 .checkbox label:before{
background:none;
border:2px solid;
border-radius:0; -moz- border-radius:0; -webkit- border-radius:0;
}
.modal-4 .checkbox label:after{
width:6px;
height:15px;
top:-3px;
left:8px
}
.modal-4 .checkbox input[type="checkbox"]:checked + label:before, .modal-4 .checkbox input[type="checkbox"]:checked + label:after{
background:none;
border-color:#12B555;
}
Κατηγορίες:
Σχόλια