Menata gaya kontrol formulir

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

Resource

• Warna aksen
• Menata gaya elemen <select>
• Aksesibilitas Kontrol Formulir Bergaya
• Membuka UI