Красивые чекбоксы(Checkbox)

Question

как сделать такой чекбокс с через css3?

Answer 1

HTML


    <label class="slideSwitch">
        <input type="checkbox" id="ChkBox">
        <span class="slideSwitchSlider"></span>
     </label>

CSS

/* Switch with round slider */

.slideSwitch{
    position: relative;
    display: inline-block;
    margin: auto 2em;
    width: 3em;
    height: 1.5em;
}

.slideSwitch input{
    opacity: 0;
    width: 0;
    height: 1.8em;
}

.slideSwitchSlider{
    position: absolute;
    top: -3px;
    left: -3px;
    width: 3em;
    height: 1.5em;
    cursor: pointer;
    border: 2px solid;
    border-color: #EEE #DDD #DDD #EEE;
    border-radius: 1em;
    background-color: chartreuse;
    background-color: #FFF;
    -webkit-box-shadow: inset 1px 1px 3px 0px #000, inset -2px -2px 3px 0px rgba(255,255,255,0.3);
        -moz-box-shadow: inset 1px 1px 3px 0px #000, inset -2px -2px 3px 0px rgba(255,255,255,0.3);
          -o-box-shadow: inset 1px 1px 3px 0px #000, inset -2px -2px 3px 0px rgba(255,255,255,0.3);
             box-shadow: inset 1px 1px 3px 0px #000, inset -2px -2px 3px 0px rgba(255,255,255,0.3);
    -webkit-transition: .2s;
       -moz-transition: .2s;
         -o-transition: .2s;
            transition: .2s;
}


.slideSwitchSlider::before{
    position: absolute;
    content: "";
    left:3px;
    top: 2px;
    width: 1em;
    height: 1em;
    border: 1px solid #AAA;
    border-radius: 1em;
    background-color: #7FFF00;
    -webkit-transition: .4s;
       -moz-transition: .4s;
         -o-transition: .4s;
            transition: .4s;
}


.slideSwitchSlider::after{
    position: absolute;
    content: "";
    top: -3px;
    left: -3px;
    width: 3.3em;
    height: 1.7em;
    border: 2px solid;
    border-color: rgba(30, 143, 255,0.0);
    border-radius: 1em;
}


input:checked + .slideSwitchSlider {
    background-color: #7FFF00;
}

input:checked + .slideSwitchSlider::before {
    background-color: #FFF;
}

input:focus + .slideSwitchSlider::after {
    border-color: rgba(30, 143, 255,0.5);
}

input:checked + .slideSwitchSlider:before {
    -webkit-transform: translateX(1.4em);
       -moz-transform: translateX(1.4em);
         -o-transform: translateX(1.4em);
            transform: translateX(1.4em);
}


input:disabled  + .slideSwitchSlider{
    background-color: #DDD;
}

input:disabled  + .slideSwitchSlider::before{
    background-color: #DDD;
}

Answer 2

  
 input {   
  -webkit-appearance: none;
  -moz-appearance: none;  
  appearance: none;
  width: 45px;
  height: 26px;  
  cursor: pointer;
  border-radius: 30px;
  border: 3px solid #b8c9ff;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}

input:checked { 
  background: #275efe;
  border: 3px solid #275efe;
}

input::before {   
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #bbc1e1;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  transition: 0.3s;
}

input:checked::before { 
  background: #275efe;
  border: none;
  left: 21px;
  background: white;  
}

<input type="checkbox">

БЛОГ НА HUSL

Красивые чекбоксы(Checkbox)

Ответы (2 шт):