Kreasi Tombol Radio dan CheckBox Dengan SVG

Hari ini kami ingin membagikan beberapa animasi "cek" keren untuk kotak centang dan tombol radio dengan Anda. Idenya adalah untuk menghidupkan SVG untuk menciptakan efek visual yang bagus untuk memilih kotak centang atau masukan radio. Ada banyak kemungkinan untuk grafis animasi, seperti salib, tanda cek, lingkaran dan sebagainya. Teknik untuk menjiwai jalur SVG adalah dengan Jake Archibald dan Anda bisa membaca bagaimana cara kerjanya secara mendetail dalam artikelnya gambar garis animasi di SVG.

Perlu diketahui bahwa ini hanyalah sebuah proof-of-concept dan bukan solusi yang lengkap. Transisi jalur SVG mungkin tidak bekerja di semua browser, terutama yang mobile.

Untuk kotak centang atau tombol radio khusus kita menggunakan :: before pseudo-element dari label dan kita menyembunyikan input dengan mengatur opacity menjadi 0. Sebenarnya ada, di atas elemen semu, sehingga kita cukup mengklik itu dan mempertahankan perilaku seleksi input default. Kami juga membuat label yang dapat diklik dengan menetapkan nilai atribut untuk ID input.

Awalnya, kami juga menambahkan elemen SVG yang diperlukan setelah diinput dengan JavaScript. Mereka tidak akan terlihat karena jalan mereka kosong; Begitu kita memilih masukan, kita akan menghidupkan jalan dengan transisi yang tepat.

Berikut adalah contoh struktur formulir:

<form class="ac-custom ac-checkbox ac-cross">
 <h2>How do you collaboratively administrate empowered markets via plug-and-play networks?</h2>
 <ul>
  <li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">Efficiently unleash information</label></li>
  <li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">Quickly maximize timely deliverables</label></li>
  <li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">Dramatically maintain solutions</label></li>
  <li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">Completely synergize relationships</label></li>
  <li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">Professionally cultivate customer service</label></li>
 </ul>
</form>

Kami menggunakan daftar unordered dengan input dan label.

Gaya inti untuk membuat masukan tak terlihat dan membuat kotak dari elemen semu adalah sebagai berikut:

.ac-custom label {
 display: inline-block;
 position: relative;
 font-size: 2em;
 padding: 0 0 0 80px;
 vertical-align: top;
 color: rgba(0,0,0,0.2);
 cursor: pointer;
 transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
 width: 50px;
 height: 50px;
 top: 50%;
 left: 0;
 margin-top: -25px;
 position: absolute;
 cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
 opacity: 0;
 display: inline-block;
 vertical-align: middle;
 z-index: 100;
}

.ac-custom label::before {
 content: '';
 border: 4px solid #fff;
 transition: opacity 0.3s;
}

Saat masukan masuk dicentang, kami akan menghidupkan opacity dari "kotak centang semu" dan warna label:

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
 color: #fff;
} 

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
 opacity: 0.8;
}

Seperti yang dapat Anda lihat, kami menggunakan pemilih saudara yang berdekatan untuk menargetkan label dan elemen pseudo-nya. Ini bisa jadi buggy di beberapa browser sehingga Anda mungkin ingin menambahkan masukan ke dalam label seperti ditunjukkan pada contoh B pada halaman Wiki label: HTML / Elements / label - W3C Wiki.

Kami melihat kesalahan kecil untuk contoh terakhir di Firefox (24.0) di Mac. Untuk beberapa alasan, akhir gambar SVG segera ditampilkan sebelum animasi.

Teks pengisi dalam demo berasal dari Corporate Ipsum.

Lihat  Unduh

Password: www.duniadesain.net

Script ini bisa bekerja di ( IE9, Google Chrome 30+, Firefox 27+)

Saya harap Anda menikmati animasi ini dan menemukannya memberi inspirasi dan bermanfaat!
Source: Tympanus