Menata gaya kontrol formulir

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?

Menggunakan revert: all;.
Coba lagi.
Menggunakan appearance: none;.
🎉
Menggunakan appearance: revert;.
Coba lagi.
Menggunakan revert: appearance;.
Coba lagi.

Referensi