Cara Mengubah Style Radio Button dengan CSS3
Radio button adalah sebuah sebuah tombol alternatif yang berfungsi bagi memilih diantara alternatif yang terdapat, radio button ini lazimnya nya dimanfaatkan bagi membatasi pengguna bagi memilih alternatif dari diantara radio button yang terdapat, contohnya bila di form terdapat dua alternatif radio button dengan nama laki-laki dan perempuan karenanya kita diharuskan memilih satu diantaera dua alternatif tersebut, laki-laki atau perempuan.
Secara default tampilan radio button tidaklah seperti itu istimewa, namun kita dapat memberikan style CSS3 kepada radio button agar terlihat menarik, seperti di contoh dibawah ini kita akan praktekan bagaimana Cara Mengubah Style Radio Button dengan CSS3.
Bagi membangun radio button tidaklah sulit, kalian dapat ketikan sintak HTML berikut.
<body>
<div class=wraper>
<ul>
<li>
<input type=radio id=f-option name=Buah checked=checked>
<label for=f-option>Jeruk</label>
<div class=check></div>
</li>
<li>
<input type=radio id=s-option name=Buah>
<label for=s-option>Mangga</label>
<div class=check><div class=inside></div></div>
</li>
<li>
<input type=radio id=t-option name=Buah>
<label for=t-option>Anggur</label>
<div class=check><div class=inside></div></div>
</li>
</ul>
</div>
</body>
Sintak diatas ialah basic bagi membangun radio button lazimnya, bagi memberikan style radio button kita akan set dengan sintak CSS3 berikut bagi menambahkan aksen warna dan format agar terlihat menarik dikala dilihat.
@import url('https://fonts.googleapis.com/css?family=Jacques+Francois+Shadow');
body, html{
background: #131723;
font-family: 'Jacques Francois Shadow', cursive;
}
.wraper{
display: block;
position: absolute;
margin: auto;
height: 450px;
width: 400px;
bottom: 0; left:0; right: 0; top:0;
padding: 0;
}
h2 {
color: #AAAAAA;
font-weight: normal;
}
.wraper ul{
list-style: none;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
ul li{
color: #AAAAAA;
display: block;
position: relative;
float: left;
width: 80%;
height: 75px;
border-bottom: 2px solid #61D2D6;
}
ul li input[type=radio]{
position: absolute;
visibility: hidden;
}
ul li label{
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 0px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label{
color: #FFFFFF;
}
ul li .check{
display: block;
position: absolute;
border: 5px solid #AAAAAA;
border-radius: 100%;
height: 25px;
width: 25px;
top: 21px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #FFFFFF;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked .check {
border: 5px solid #ED146F;
}
input[type=radio]:checked .check::before{
background: #ED146F;
}
input[type=radio]:checked label{
color: #ED146F;
}Setelah kode diatas diketikan, berikutnya kalian dapat melihat hasilnya di browser, karenanya nanti akan terlihat tampilan radio button yang betul-betul menarik dan tak lazimnya. Baiklah demikian artikel mengenai Cara Mengubah Style Radio Button dengan CSS3. semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
