Cara Mengubah Style Radio Button dengan CSS3

Radio button merupakan sebuah tombol pilihan yang berfungsi untuk memilih salah satu pilihan yang tersedia, radio button ini biasa nya dipakai untuk membatasi pengguna untuk memilih pilihan dari salah satu radio button yang ada, contohnya jika pada form terdapat dua pilihan radio button dengan nama laki-laki dan perempuan maka kita diharuskan memilih satu diantaera dua pilihan tersebut, laki-laki atau perempuan.

Secara default tampilan radio button tidaklah begitu istimewa, namun kita bisa memberikan style CSS3 terhadap radio button agar terlihat menarik, seperti pada contoh dibawah ini kita akan praktekan bagaimana Cara Mengubah Style Radio Button dengan CSS3.

Untuk membuat radio button tidaklah sulit, kalian bisa 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 adalah basic untuk membuat radio button biasa, untuk memberikan style radio button kita akan set dengan sintak CSS3 berikut untuk menambahkan aksen warna dan bentuk agar terlihat menarik saat 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, selanjutnya kalian bisa melihat hasilnya pada browser, maka nanti akan terlihat tampilan radio button yang sangat menarik dan tidak biasa. Baiklah sekian artikel mengenai Cara Mengubah Style Radio Button dengan CSS3. semoga bermanfaat 🙂

DEMO

Cara Mengubah Style Radio Button dengan CSS3

Kategori