LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
input[type=radio],
input[type=checkbox] {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.radio-label,
.checkbox-label {
  padding-left: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.radio-label::before, .radio-label::after,
.checkbox-label::before,
.checkbox-label::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.radio-label::before,
.checkbox-label::before {
  left: 0;
  border: 1px solid #e6e6e6;
  box-shadow: inset 1px 1px rgba(0, 0, 0, 0.03);
}
.radio-label::after,
.checkbox-label::after {
  left: 3px;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9487/icon-check.svg") no-repeat center center;
  display: none;
}

.radio-label::before {
  border-radius: 50%;
}

.checkbox-label::before {
  border-radius: 3px;
}

input[type=radio]:checked + label::before,
input[type=checkbox]:checked + label::before {
  background-color: #19191a;
  border: none;
  box-shadow: none;
}

input[type=radio]:checked + label::after,
input[type=checkbox]:checked + label::after {
  display: block;
}

.form input[type=text],
.form .input-wrapper {
  margin: 1em;
}
.form .input-wrapper {
  position: relative;
  display: inline-block;
}

Description

Taken from here ... http://codyhouse.co/gem/css-style-guide-template/
Term
Wed, 12/27/2017 - 06:58

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv