Dalam modul ini, Anda akan mempelajari cara menata gaya kontrol formulir, dan cara mencocokkan gaya situs Anda yang lainnya.
Membantu pengguna memilih opsi
Elemen <select>
Gaya default elemen <select>
tidak terlihat bagus, dan tampilannya tidak konsisten di antara browser.
Pertama, mari kita ubah 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 minimal 1rem
(yang untuk sebagian besar browser memiliki nilai default 16 piksel) untuk elemen <select>
Anda.
Tindakan ini akan mencegah zoom halaman di iOS Safari saat kontrol formulir difokuskan.
Tentu saja Anda dapat mengubah warna elemen agar sesuai dengan warna merek 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 Pilih Seperti Ini 2019
Bagaimana dengan elemen <option>
? Elemen <option>
adalah apa yang disebut
elemen yang diganti yang representasinya berada di luar cakupan CSS.
Saat tulisan ini ditulis, 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 brand Anda dan terlihat sama lintas browser.
Sebelumnya, developer tidak dapat menata gaya kontrol <input type="checkbox">
dan <input type="radio">
secara langsung.
Sekarang, kotak centang dan tombol pilihan dapat diberi gaya melalui elemen pseudonya.
Atau, teknik penggantian berikut dapat digunakan untuk membuat gaya kustom bagi elemen ini.
Pertama, sembunyikan kotak centang default dan tombol pilihan secara visual.
input[type="radio"],
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
Penting untuk menggunakan position: absolute
bersama opacity: 0
, bukan display: none
atau visibility: hidden
,
sehingga kontrol hanya tersembunyi secara visual. Hal ini akan memastikan bahwa pesan akan tetap ditampilkan oleh hierarki aksesibilitas browser. Perhatikan bahwa gaya lebih lanjut mungkin diperlukan untuk memastikan bahwa kontrol bentuk yang tersembunyi
secara visual tetap berada "di atas" elemen penggantinya. Tindakan ini akan membantu memastikan bahwa pengarahan kursor ke salah satu
elemen tersebut, saat pembaca layar aktif, atau saat menggunakan perangkat sentuh dengan pembaca layar yang diaktifkan, kontrol yang tersembunyi secara visual akan
dapat ditemukan jika menjelajah dengan sentuhan, dan indikator fokus yang terlihat pada pembaca layar umumnya akan muncul di lokasi kontrol
dirender di layar.
Untuk menampilkan kotak centang dan tombol pilihan kustom, Anda memiliki berbagai opsi.
Anda menggunakan elemen pseudo 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 brand Anda.
Pelajari lebih lanjut gaya visual <input type="checkbox">
, <input type="radio">
, dan gaya kotak centang kustom.
Cara menggunakan warna situs untuk kontrol formulir
Apakah Anda ingin menggunakan gaya situs untuk membentuk 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 menata gaya kontrol formulir
Bagaimana cara menghapus gaya visual native platform kontrol formulir?
revert: all;
.appearance: none;
.appearance: revert;
.revert: appearance;
.