form beautify

by basecss

HTML

<div class="effeckt effeckt-demo-form-elements">

    <header>
        <h2>Form Elements</h2>
    </header>

  <!-- Checkboxes -->
  <!-- http://codepen.io/uquaisse/pen/Jqhte -->
  <h3>ios Checkbox</h3>
  <input type="checkbox" class="effeckt-ckbox-ios7">
  <input type="checkbox" class="effeckt-ckbox-ios7" checked="">
  <input type="checkbox" class="effeckt-ckbox-ios7">
  <input type="checkbox" class="effeckt-ckbox-ios7">
  <input type="checkbox" class="effeckt-ckbox-ios7">

  <!-- Radios -->
  <!-- http://codepen.io/uquaisse/pen/Jqhte -->
  <h3>ios Radio</h3>
  <input type="radio" name="group" class="effeckt-rdio-ios7">
  <input type="radio" name="group" class="effeckt-rdio-ios7" checked="">
  <input type="radio" name="group" class="effeckt-rdio-ios7">
  <input type="radio" name="group" class="effeckt-rdio-ios7">
  <input type="radio" name="group" class="effeckt-rdio-ios7">

  <!-- Android Checkboxes -->

  <h3>Android Checkbox</h3>
  <input type="checkbox" class="effeckt-ckbox-android">
  <input type="checkbox" class="effeckt-ckbox-android" checked="">
  <input type="checkbox" class="effeckt-ckbox-android">
  <input type="checkbox" class="effeckt-ckbox-android">
  <input type="checkbox" class="effeckt-ckbox-android">

  <!-- Android Radios -->

  <h3>Android Radio</h3>
  <input type="radio" name="group2" class="effeckt-rdio-android">
  <input type="radio" name="group2" class="effeckt-rdio-android" checked="">
  <input type="radio" name="group2" class="effeckt-rdio-android">
  <input type="radio" name="group2" class="effeckt-rdio-android">
  <input type="radio" name="group2" class="effeckt-rdio-android">
  <input type="radio" name="group2" class="effeckt-rdio-android">
</div>

CSS

.effeckt {
  padding: 2rem;
  background: white;
  margin: 0 0 1rem 0;
}
.effeckt header {
  margin: 0 0 1rem 0;
  border-bottom: 2px solid #eeeeee;
  position: relative;
}

.effeckt-ckbox-ios7[type=checkbox],
.effeckt-rdio-ios7[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: inset 0px 0px 0px 1px #e6e6e6;
    border-radius: 15px;
    cursor: pointer;
    display: inline-block;
    height: 31px;
    padding: 1px;
    position: relative;
    margin: 0px;
    width: 52px;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    background: white;
}

.effeckt-ckbox-ios7[type=checkbox]:checked,
.effeckt-rdio-ios7:checked {
    box-shadow: inset 0px 0px 0px 20px #666666;
}

.effeckt-ckbox-ios7[type=checkbox]:after,
.effeckt-rdio-ios7[type=radio]:after {
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    content: '';
    cursor: pointer;
    height: 29px;
    position: absolute;
    width: 29px;
    -webkit-transition: all 0.1s ease-in 0.1s;
    -o-transition: all 0.1s ease-in 0.1s;
    transition: all 0.1s ease-in 0.1s;
    background: white;
}

.effeckt-ckbox-ios7[type="checkbox"]:checked:after,
.effeckt-rdio-ios7[type="radio"]:checked:after {
    left: 22px;
}

.effeckt-ckbox-android[type=checkbox],
.effeckt-rdio-android[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: inset 0px 0px 0px 1px #e6e6e6;
    border-radius: 1px;
    cursor: pointer;
    display: inline-block;
    height: 21px;
    padding: 1px;
    position: relative;
    margin: 0px;
    width: 72px;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
   ...