Tabel dan form adalah komponen interaktif yang punya styling bawaan browser. Section ini membahas menyegarkan tampilannya tanpa mengabaikan aksesibilitas: tabel data yang terbaca, input dan tombol yang konsisten, focus dan validation states, hingga accent-color dan appearance.

# Styling Tables

Rapikan tabel data dengan border-collapse, zebra rows berbasis nth-child, caption, dan header sticky saat tabel digulir.

Buka → # Styling Inputs

Atur tampilan input, select, dan textarea dengan padding, border, dan font: inherit agar kontrol form konsisten dengan desain halaman.

Buka → # Styling Buttons

Restyle elemen button dengan font: inherit, varian warna lewat class, ukuran tap minimal 44px, dan umpan balik hover yang halus.

Buka → # Focus States

Rancang indikator fokus yang terlihat jelas bagi pengguna keyboard dengan :focus, :focus-visible, dan :focus-within beserta outline kustom.

Buka → # Validation States

Tampilkan status validasi form dengan :valid, :invalid, :required, dan :disabled, serta kenali :user-valid/:user-invalid yang lebih ramah pengguna.

Buka → # Accent Color

Warnai kontrol form native seperti checkbox, radio, range, dan progress dengan satu properti accent-color.

Buka → # Appearance

Hapus gaya native kontrol form dengan appearance: none, lalu bangun tampilan kustom untuk select dan checkbox tanpa mengabaikan semantik HTML.

Buka → # Accessible Form Design

Susun form yang accessible dengan label eksplisit, fieldset/legend, aria-describedby untuk hint dan galat, serta target sentuh minimal 44px.

Buka →