Cara Mengubah Tampilan Radio dan Checkbox dengan CSS3
Tampilan menarik dan cantik di sebuah situs adalah hal wajib dan sangat urgen yang mesti ada oleh karena nya kita patut memperhatikan setiap detail tampilan dari masing-masing element situs, hal ini akan berpangaruh di kualitas situs itu sendiri. Seperti hal nya di tampilan form inputan, lazimnya nya kita masih sering menemukan tampilan form inputan masih benar-benar sederhana, tampilan Radio, Checkbok dan inputan lain nya masih benar-benar sederhana. akan tetapi apakah dapat kita mengubah tampilan Radio dan Checkbox ? tentu saja dapat, berikut akan saya jelaskan bagaimana Cara Mengubah Tampilan Radio dan Checkbox dengan CSS3. Bila kalian ingin tampilan inputan Radio ataupun Checkbox terlihat menarik, tak ada salahnya bagi mencoba panduan berikut ini.
Di dasarnya bagi membangun sebuah inputan berupa Radio maupun Checkbox benar-benar lah gampang, kalian lumayan ketikan sintak HTML basic nya seperti ini.
<input type=radio name=> Radio Button
<input type=checkbox name=> Checkbox
Dengan sintak diatas kalian telah dapat menggunakan kegunaan dari masing-masing inputan, Nah sekarang ini kita akan sedikit kostum supaya tampilan Radio dan Checkbox terlihat lebih menarik lagi, caranya yaitu dengan sedikit kostum dengan CSS3.
Pertama-tama kita akan membangun tampilan Radio button dan Checkbox nya terlebih dahulu, silahkan kalian dapat ketikan sintak HTML berikut ini.
<body>
<div class=container>
<ul>
<li>
<input type=radio id=radio-1 name=rad/>
<label for=radio-1>Radio Satu</label>
</li>
<li>
<input type=radio id=radio-2 name=rad/>
<label for=radio-2>Radio Dua</label>
</li>
</ul>
<br />
<ul>
<li>
<input type=checkbox id=check-1/>
<label for=check-1>Checkbox Satu</label>
</li>
<li>
<input type=checkbox id=check-2/>
<label for=check-2>Checkbox Dua</label>
</li>
</ul>
</div>
</body>
Selanjut nya yaitu kita akan kostum Radio dan Checkbox dengan CSS3. berikut sintak CSS3 nya.
li {
list-style: none;
font-size: 125%;
margin-bottom: 1em;
position: relative;
}
input[type=checkbox],
input[type=radio] {
display: none;
}
input[type=checkbox]+label,
input[type=radio]+label {
padding-left: 2em;
}
input[type=checkbox]+label:before,
input[type=checkbox]+label:after,
input[type=radio]+label:before {
content: '';
background: #ececec;
border-radius: 50%;
width: 20px;
height: 20px;
display: inline-block;
border: 1px solid #f90;
z-index: -1;
position: absolute;
left: 0;
transition: all ease .5s;
}
input[type=checkbox]+label:after{
border-radius: 0;
}
input[type=checkbox]:checked+label:after,
input[type=radio]:checked+label:before {
border-radius: 50% 0 50% 50%;
transition: all ease .75s;
transform: rotate( 45deg );
background: #666;
border: 1px solid #666;
}
input[type=checkbox]:checked+label:before {
transition: all ease .75s;
border-radius: 0 50% 50% 0;
background: #666;
border: 1px solid #666;
}Setelah seluruh sintak CSS3 dan HTMLK diketikan, simpan file dengan format .html kemudian buka dibrowser masing-masing dan lihat hasilnya. Karenanya akan terlihat tampilan Radio dan Checkbox yang lebih menarik dari biasanya. Bagus begitulah sedikit panduan mengenai Cara Mengubah Tampilan Radio dan Checkbox dengan CSS3. semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
