CSS3 untuk Checkbox dan Radio Button

Trik ini akan menyembunyikan elemen INPUT default kotak centang tombol/radio dan styling terkait elemen LABEL nya. Baik centang maupun tombol radio dapat mengambil tampilan baru namun tetap mempertahankan fungsi mereka di dalam formulir.

Kotak centang kustom dan radio tombol yang Anda lihat ditata dengan bantuan CSS2 ::before dan ::after. Setiap kotak centang yang dipilih atau radio nilainya akan diteruskan seperti biasanya. Tidak ada script didalamnya dan berikut cssnya.

HTML
<input type="checkbox" id="checkbox1" class="css3checkbox" />
<label class="toggler" for="checkbox1">Checkbox 1</label>

<input type="checkbox" id="checkbox2" class="css3checkbox" />
<label class="toggler" for="checkbox2">Checkbox 2</label>

<input type="checkbox" id="checkbox3" class="css3checkbox" />
<label class="toggler" for="checkbox3">Checkbox 3</label>

<input type="radio" id="radio1" name="myradios" class="css3radio" />
<label class="toggler_r" for="radio1">Radio 1</label>

<input type="radio" id="radio2" name="myradios" class="css3radio" />
<label class="toggler_r" for="radio2">Radio 2</label>

<input type="radio" id="radio3" name="myradios" class="css3radio" />
<label class="toggler_r" for="radio3">Radio 3</label>
CSS Style
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);


/* checkbox buttons */

input[type="checkbox"].css3checkbox{
  display: none;
}

label.toggler{
  display: block;
  position: relative;
  padding-left: 32px;
  padding-top: 2px;
  margin-bottom: 1em;
  cursor: pointer;
}

label.toggler::before{
  content: '';
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #B1E5EF;
  box-shadow: 0 0 3px #BFDEFC inset;
  left: 0;
  top: 0;
}

label.toggler::after{
  content: '\f00c'; /* fontAwesome icon font unicode. di http://fortawesome.github.io/Font-Awesome/cheatsheet/ untuk lainnya */
  position:absolute;
  left: 3px;
  top: 3px;
  font: bold 18px FontAwesome;
  color: #1B4977;
  width: 0;
  text-shadow: 0 0 2px #eee;
  overflow: hidden;
}

input[type="checkbox"]:checked + label.toggler::after{
  transition: width 0.2s;
  width: 25px;
}


/* radio buttons */

input[type="radio"].css3radio{
  display: none;
}

label.toggler_r{
  display: block;
  position: relative;
  padding-left: 32px;
  padding-top: 2px;
  margin-bottom: 1em;
  cursor: pointer;
}

label.toggler_r::before{
  content: '';
  display: block;
  position:absolute;
  width: 25px;
  height: 25px;
  background: #B1E5EF;
  box-shadow: 0 0 3px #BFDEFC inset;
  border-radius: 25px;
  left: 0;
  top: 0;
}

label.toggler_r::after{
  content: '';
  position:absolute;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  left: 5px;
  top: 5px;
  overflow: hidden;
  transition: all 0.2s;
}

input[type="radio"]:checked + label.toggler_r::after{
  background: #1B4977;
  box-shadow: 1px 1px 5px white;
}

URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini