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;
}



Σχόλια