Kontrol form adalah satu-satunya kelompok elemen yang gaya bawaannya tidak hanya berbeda dari desain halaman, tetapi juga berbeda antarbrowser — dan ada satu perilaku yang hampir selalu mengejutkan pemula: input tidak mewarisi font dari halamannya. Input teks dengan font-size halaman 16px tetap tampil dengan font bawaan browser yang lebih kecil dan keluarga font yang berbeda. Pada Chapter ini kita membedah perilaku tersebut, membangun gaya dasar input yang rapi, lalu menyinggung singkat select dan textarea.

Form Control Tidak Mewarisi Font #

Browser menerapkan stylesheet user-agent khusus pada kontrol form: elemen <input>, <select>, dan <textarea> diberi font-family dan font-size miliknya sendiri, sehingga aturan inheritance biasa tidak berlaku untuk properti font pada elemen ini. Konsekuensinya, input di halaman dengan font-size: 16px berukuran sekitar 13,33px pada Chromium, dan keluarga fontnya bukan font halaman. Solusinya satu baris — deklarasi font: inherit pada kontrol form:

css 
.input-standar {
  font: inherit;
  padding: 10px 12px;
  border: 2px solid rgb(203, 213, 225);
  border-radius: 8px;
}

Mari kita telaah deklarasinya:

  1. Baris 2 (font: inherit): shorthand font dengan kata kunci inherit menyalin seluruh properti font dari induknya — keluarga, ukuran, ketebalan, hingga line-height — sehingga teks yang diketik pengguna tampil persis seperti teks halaman.
  2. Baris 3 (padding: 10px 12px): kontrol form menghormati box model seperti elemen lain; padding memberi jarak antara teks pengguna dan tepi kotak input.
  3. Baris 4–5 (border, border-radius): border default diganti dengan border netral 2px, dan sudut diberi radius 8px agar konsisten dengan kartu atau tombol pada halaman yang sama.

Hasil di Browser:

text 
Input dengan font: inherit berukuran 16px dengan padding atas 10px —
mengikuti font halaman (body 16px).
Input tanpa styling apa pun tetap berukuran 13,3333px mengikuti
stylesheet user-agent browser.

Kedua nilai font-size dan padding diprobe otomatis pada demo; perbandingan berdampingan ini adalah bukti paling cepat bahwa inheritance font memang terhenti pada kontrol form.

Padding, Border, dan Keadaan Fokus #

Setelah font dan box model beres, identitas visual input tinggal warna border dan keadaan fokus. Praktik yang sehat: border netral untuk keadaan biasa, border berwarna saat fokus, dan outline eksplisit sebagai indikator fokus keyboard. Outline dipilih alih-alih mengandalkan border karena outline tidak menggeser layout — bahasan lengkapnya ada pada Chapter Focus States :

css 
.input-standar:focus {
  border-color: rgb(37, 99, 235);
  outline: 2px solid rgb(37, 99, 235);
  outline-offset: 2px;
}

Perhatikan bahwa :focus di sini baru terpicu saat pengguna mengklik atau menekan Tab ke input; nilai computed input dalam keadaan biasa tetap memakai border netral, dan itulah yang diprobe demo.

::placeholder, select, dan textarea #

Teks placeholder di dalam input distyle lewat pseudo-element ::placeholder (keluarga pseudo-element dibahas pada Chapter Pseudo-elements ):

css 
.input-standar::placeholder {
  color: rgb(148, 163, 184);
}

Tiga catatan untuk kontrol lainnya. Pertama, <textarea> mengikuti resep yang sama — font: inherit, padding, border — dan properti resize: vertical membatasi pengguna agar hanya bisa mengubah tingginya. Kedua, <select> jauh lebih terbatas: padding dan border bisa diatur, tetapi ikon panah dan daftar opsinya digambar browser; pelarian yang lazim adalah appearance: none plus panah kustom, dibahas tuntas pada Chapter Appearance . Ketiga, seluruh gaya ini sebaiknya dikelompokkan dalam satu aturan bersama:

css 
input,
select,
textarea {
  font: inherit;
}

Dengan satu aturan dasar seperti ini, setiap kontrol form halaman mulai dari titik yang sama, dan penyesuaian per komponen cukup menambah deklarasi — bukan menuliskannya ulang.