Cara Menambahkan Gambar Pada Radio Button

Hallo Sahabat Dumetschool, dalam kesempatan artikel ini saya akan membahas tentang Cara Menambahkan Gambar Pada Radio Button. Radio Button secara default tampilannya adalah bulatan, nah sekarang kita akan menambahkan gambar pada radio button agar tampilannya semakin menarik.

Pertama silahkan sahabat persiapkan gambar yang ingin dipakai, saya sudah menyiapkan gambar dari sosial media yang sering digunakan setiap harinya.

Baiklah selanjutnya buat file HTML yang berisi seperti dibawah ini:

<div class="container">
    <h2>Menambahkan gambar Dalam Radio Button</h2>
    <p>1. Sosial media yang sering digunakan</p>
    <form>
  <label>
     <input type="radio" name="sosmed">
     <img src="img/instagram.png">
 </label>
 <label>
     <input type="radio" name="sosmed">
     <img src="img/facebook.png">
 </label>
 <label>
     <input type="radio" name="sosmed">
     <img src="img/twitter.png">
 </label>
  <label>
      <input type="radio" name="sosmed">
      <img src="img/whatsapp.png">
  </label>
</form>
  </div>

Jika sudah jangan lupa untuk menambahkan style CSS pada Radio Button berikut code CSSnya:

.container{width: 600px;margin:auto;}
    h1{text-decoration: underline;}
    label{display: block;}
      /* Menyembunyikan radio button */
        label > input{ 
          visibility: hidden; 
          position: absolute; 
        }
        /* style gambar */
        label > input + img{ 
          cursor:pointer;
          border:2px solid transparent;
        }
        /* memberikan style pada gambar yang dipilih */
        label > input:checked + img{
          border: 2px solid #ff00cb;
        }

Apabila sudah diketikkan, sahabat langsung simpan lalu jalankan pada browser maka akan seperti tampilan berikut:

Saya kira cukup dalam pembahasan artikel Cara Menambahkan Gambar Pada Radio Button. Semoga bermanfaat dan sampai jumpa dengan pembhasan lainnya, selamat mencoba.

terima kasih.

The post Cara Menambahkan Gambar Pada Radio Button appeared first on Kursus Website Terbaik.