Dalam modul ini, Anda akan mempelajari cara menata gaya kontrol formulir, dan cara mencocokkan gaya situs Anda yang lain.
Membantu pengguna memilih opsi
Elemen <select>
Gaya default elemen <select>
tidak terlihat bagus, dan tampilannya tidak konsisten di antara browser.
Pertama, mari kita ubah tanda panahnya.
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url(arrow.png);
background-repeat: no-repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto;
}
Untuk menghapus panah default dari elemen <select>
,
gunakan properti appearance
CSS.
Untuk menampilkan panah pilihan Anda, tentukan panah sebagai background
.
Anda juga harus mengubah font-size
menjadi setidaknya 1rem
(yang untuk sebagian besar browser memiliki nilai default 16 px) untuk elemen <select>
.
Tindakan ini akan mencegah zoom halaman di iOS Safari saat kontrol formulir difokuskan.
Tentu saja, Anda juga dapat mengubah warna elemen agar sesuai dengan warna brand Anda.
Setelah menambahkan beberapa gaya lainnya untuk spasi, :hover
, dan :focus
,
tampilan elemen <select>
kini konsisten di antara browser.
Lihat di demo berikut dari Menata Gaya Select Like It’s 2019
Bagaimana dengan elemen <option>
? Elemen <option>
disebut
mengganti elemen yang representasinya berada di luar cakupan CSS.
Saat penulisan ini, Anda tidak dapat menata gaya elemen <option>
.
Kotak centang dan Tombol pilihan
Tampilan <input type="checkbox">
dan <input type="radio">
bervariasi di berbagai browser.
Buka demo di berbagai browser untuk melihat perbedaannya. Mari kita lihat cara memastikan bahwa kotak centang dan tombol pilihan cocok dengan merek Anda dan terlihat serupa lintas browser.
Sebelumnya, developer tidak dapat menata gaya kontrol <input type="checkbox">
dan <input type="radio">
secara langsung.
Kotak centang dan tombol pilihan kini dapat ditata melalui elemen semunya.
Atau teknik penggantian berikut dapat digunakan untuk membuat gaya kustom untuk elemen tersebut.
Pertama, sembunyikan kotak centang dan tombol pilihan default secara visual.
input[type="radio"],
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
Sangat penting untuk menggunakan position: absolute
yang dikombinasikan dengan opacity: 0
, bukan display: none
atau visibility: hidden
sehingga kontrol hanya
tersembunyi secara visual. Hal ini akan memastikan bahwa ekstensi tetap terekspos oleh
hierarki aksesibilitas. Perhatikan bahwa mungkin diperlukan penataan gaya lebih lanjut untuk memastikan bahwa elemen
kontrol formulir tetap diposisikan "di atas" elemen penggantinya. Tindakan ini akan membantu memastikan bahwa kursor diarahkan ke salah satu kolom
elemen lain, saat pembaca layar aktif, atau saat menggunakan perangkat sentuh dengan pembaca layar diaktifkan, kontrol yang
dapat ditemukan jika menjelajah dengan sentuhan, dan indikator fokus yang terlihat dari pembaca layar umumnya akan muncul di lokasi kontrol tersebut
dirender di layar.
Untuk menampilkan kotak centang dan tombol pilihan kustom, Anda memiliki opsi yang berbeda.
Anda menggunakan elemen semu CSS ::before
dan properti background
CSS, atau menggunakan gambar SVG inline.
input[type="radio"] + label::before {
content: "";
width: 1em;
height: 1em;
border: 1px solid black;
display: inline-block;
border-radius: 50%;
margin-inline-end: 0.5em;
}
input[type="radio"]:checked + label::before {
background: black;
}
Ada banyak kemungkinan dengan CSS untuk memastikan kotak centang dan tombol pilihan sesuai dengan gaya merek Anda.
Pelajari selengkapnya tentang
gaya <input type="checkbox">
, dan <input type="radio">
dan gaya kotak centang kustom.
Cara menggunakan warna situs untuk kontrol formulir
Apakah Anda ingin mengubah gaya situs menjadi kontrol dengan satu baris kode?
Anda dapat menggunakan properti CSS accent-color
untuk melakukannya.
checkbox {
accent-color: orange;
}
Menguji pemahaman Anda
Uji pengetahuan Anda tentang kontrol gaya formulir
Bagaimana cara Anda menghapus gaya visual native platform untuk kontrol formulir?
revert: all;
.appearance: none;
.appearance: revert;
.revert: appearance;
.