Tampilan menarik dan cantik pada sebuah website merupakan hal wajib dan paling penting yang harus ada oleh karena nya kita patut memperhatikan setiap detail tampilan dari masing-masing element website, hal ini akan berpangaruh pada kualitas website itu sendiri. Seperti hal nya pada tampilan form inputan, biasa nya kita masih sering menemukan tampilan form inputan masih sangat sederhana, tampilan Radio, Checkbok dan inputan lain nya masih sangat sederhana. Tapi apakah bisa kita mengubah tampilan Radio dan Checkbox ? tentu saja bisa, berikut akan saya jelaskan bagaimana Cara Mengubah Tampilan Radio dan Checkbox dengan CSS3. Bila kalian ingin tampilan inputan Radio ataupun Checkbox terlihat menarik, tidak ada salahnya untuk mencoba tutorial berikut ini. Pada dasarnya untuk membuat sebuah inputan berupa Radio maupun Checkbox sangat lah mudah, kalian cukup ketikan sintak HTML dasar nya seperti ini. <input type="radio" name=""> Radio Button <input type="checkbox" name=""> Checkbox Dengan sintak diatas kalian sudah bisa menggunakan fungsi dari masing-masing inputan, Nah sekarang kita akan sedikit kostum supaya tampilan Radio dan Checkbox terlihat lebih menarik lagi, caranya adalah dengan sedikit kostum dengan CSS3. Pertama kita akan membuat tampilan Radio button dan Checkbox nya terlebih dahulu, silahkan kalian bisa 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 adalah 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 semua sintak CSS3 dan HTMLK diketikan, simpan file dengan format .html kemudian buka dibrowser masing-masing dan lihat hasilnya. Maka akan terlihat tampilan Radio dan Checkbox yang lebih menarik dari biasanya. Baik itulah sedikit tutorial mengenai Cara Mengubah Tampilan Radio dan Checkbox dengan CSS3. semoga bermanfaat 🙂 Pada tutorial sebelumnya saya sudah mengajarkan ke teman-teman bagaimana caranya merubah desain Radio Buttons sesuai keinginan teman-teman, dan pada tutorial kali ini kita akan belajar bagaimana caranya merubah tampilan pada input type checkbox sesuai keinginan teman-teman. Caranya tidak jauh berbeda dengan cara yang kita lakukan di merubah desain Radio Buttons. Kita hanya menghilangkan property CSS border-radius nya saja. Baiklah langsung saja kita praktekan ya teman-teman. Teman-teman bisa buat struktur HTML nya seperti di bawah ini : Lalu setelah buat struktur HTML nya temen-teman bisa buat CSS nya seperti di bawah ini : Bisa dilihat di CSS tersebut disitu saya menghilangkan terlebih terlebih dahulu type Checkbox bawaan HTML nya dengan Property CSS display:none, dan kemudian membuat ulang desain checkboxnya dengan memanggil selector CSS nya, input [type="checkbox"] + label:before lalu teman-teman bisa isikan property dan value CSS nya sesaui yang di atas, teman-teman bisa merubah height dan width nya sesuai keinginan teman-teman. Mudahkan teman-teman kreasikan desain checkboxnya sesuai kreatifitas teman-teman ya.. Sekian dulu tutorial dari saya semoga bermanfaat dan bisa menambah pengetahuan teman-teman ya. Terima Kasih |
Cara merubah warna checkbox css
Pos Terkait
Copyright © 2024 idkuu.com Inc.
