A Pen by rgfx.

Custom-Checkbox-and-radio-inputs-SCSS.markdown

Custom Checkbox and radio inputs SCSS

A Pen by rgfx on CodePen.

License.

index.html

<div class="checkboxes">
<input id="a" type="checkbox" />
<label class="green-background" for="a"></label>
<input id="b" type="checkbox" />
<label class="green-background" for="b"></label>
<input id="c" type="checkbox" />
<label class="green-background" for="c"></label>
</div>


<div class="radios">
<input type="radio" name="a" />
<input type="radio" name="a" />
<input type="radio" name="a" />
<input class="medium" type="radio" name="a"/>
</div>

script.js

// http://codepen.io/bennettfeely thanks for your solution to checkboxes and radio buttons you are my hero

//http://codepen.io/lajlev/pen/diKbz thanks for the css checkbox

style.scss

@import "compass/css3";
* {@include box-sizing(border-box);}

//keyframe and animation mixins

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content
  }
  @-moz-keyframes #{$name} {
    @content
  }
  @-ms-keyframes #{$name} {
    @content
  }
  @-o-keyframes #{$name} {
    @content
  }
  @keyframes #{$name} {
    @content
  }
}

@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value;
  -ms-animation: $value;
  -o-animation: $value;
  animation: $value;
}

/* ========= */

.checkboxes{

label {
  display: inline-block;
  user-select: none;
  position: relative;
  width: 38px;
  height: 38px;
  border:2px solid rgba(0, 0, 0, 0.3);
  @include border-radius(2px);
  @include transition-duration(0.25s);
  cursor: pointer;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 2rem;
  &:after {
    content: '';
    display: block;
    margin-left:9px;
    margin-top:2px;  
    width: 9px;
    height: 18px;
    border: solid rgba(0, 0, 0, 0.1);
    border-width: 0 6px 6px 0;
    @include transform(rotate(45deg)); 
  }
  &:hover {
    border:2px solid rgba(0, 0, 0, 0.5);
    color: black;
  }
  &:active {
    @include transition-duration(0);
    -webkit-filter: brightness(0.8); 
  }
}

input {
    display: none;
  &:checked + {
    label {
      color: #269b0a;
    }
    .green-background {
      border-color: #269b0a;
      background: #269b0a;
      &:after{
          content: '';
          display: block;
          margin-left:9px;
          margin-top:2px;  
          width: 9px;
          height: 18px;
          border: solid rgba(255, 255, 255, 1);
          border-width: 0 6px 6px 0;
          @include transform(rotate(45deg)); 
      }
        }
    label {
      @include animation(boom 0.5s ease);
    }
  }
}
}


@include keyframes(boom) {
   25% {
    @include transform(scale(1.25));
  }
}

/* ========= */

.radios{
input[type="radio"] {
  @include appearance(none);
  margin:0 2rem;
  width:2rem;
  height:2rem;
  background:rgba(0, 0, 0, 0.3);
   @include box-shadow(inset 0 0 0 8px rgba(255,255,255,1), 0 0 0 2px rgba(0, 0, 0, 0.3));  
  border-radius:50%;
  @include transition-duration(0.25s);
  cursor:pointer;
  
  &:hover,
  &:checked {
    background:rgba(0, 0, 0, 0.5);
    @include box-shadow(inset 0 0 0 6px rgba(255,255,255,1), 0 0 0 2px rgba(0, 0, 0, 0.5));  
  }
  
  &:checked {
    background:#269b0a;
   @include box-shadow(inset 0 0 0 6px rgba(255,255,255,1), 0 0 0 2px #269b0a);  

  } 
}
}