Styling Input

Kolom input sering menjadi elemen yang paling menonjolkan perbedaan antara halaman yang ditata serius dan halaman yang dibiarkan bawaan. Secara bawaan, input teks tampil kecil, penuh tepi, dan memakai font yang tidak sama dengan teks di sekelilingnya, sehingga form terasa seperti tempelan di atas desain. Ada dua perilaku bawaan yang wajib kita pahami sebelum menata input, lalu satu resep styling yang bisa dipakai ulang di seluruh form. Pada chapter ini kita bangun fondasi itu, sekaligus memastikan tinggi input selaras dengan tombol di sebelahnya.

Dua Perilaku Bawaan yang Sering Terlewat #

Control form memiliki aturan bawaan yang berbeda dari elemen lain. Dua yang paling berpengaruh pada styling input:

Perilaku pertama adalah gotcha klasik. Halaman memakai font system-ui dengan ukuran 17px, tetapi teks di dalam input tetap tampil dengan font bawaan browser dan ukuran yang lebih kecil. Solusinya satu baris: property font dengan nilai inherit, yang memerintahkan input mengikuti font yang diwariskan induknya:

.kolom-teks {
  font: inherit;
}

Perilaku kedua justru membantu kita. Karena kontrol form sudah border-box, sebuah input berukuran width: 100% dengan padding: 10px 14px dan border: 1px solid tetap tepat memenuhi wadahnya tanpa meluber. Angka-angka pada section Box Model berlaku di sini dengan prediktabel; pastikan saja global reset border-box milik proyek tidak membuat kita lupa bahwa elemen di luar kontrol form masih content-box.

Resep Dasar Input yang Rapi #

Dengan fondasi di atas, berikut resep yang bisa dipakai ulang:

.kolom-teks {
  font: inherit;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #c7d2cb;
  border-radius: 10px;
  background-color: #fdfaf3;
  color: #1f2933;
}

.kolom-teks:focus-visible {
  outline: 2px solid #1f6f54;
  outline-offset: 2px;
}

Panel kanan demo berikut memakai input dengan class demo-kolom — resep di atas; panel kiri membiarkan input tampil bawaan:

Mari kita telaah deklarasi-deklarasinya:

1. font: inherit: mengambil seluruh properti font dari induk, sehingga teks yang diketik pengguna tampak satu keluarga dengan teks halaman.
2. padding: 10px 14px: memberi ruang di dalam kotak; tanpa padding, teks menempel pada border dan terasa sempit.
3. border: 1px solid #c7d2cb: tepi tipis yang menandai batas area ketik dengan warna kelabu kehijauan yang tenang.
4. border-radius: 10px: melunakkan sudut agar konsisten dengan komponen lain seperti kartu dan tombol.
5. background-color dan color: menegaskan kontras antara teks dan latarnya, menggantikan putih steril bawaan.

Menyamakan Tinggi dengan Tombol #

Input hampir selalu berdiri berdampingan dengan tombol — kolom pencarian dengan tombol cari, kolom email dengan tombol langganan. Agar keduanya sama tinggi, cukup pastikan tiga nilai yang sama pada keduanya: font, padding, dan border dengan ketebalan yang sama. Karena keduanya border-box, tinggi totalnya otomatis identik:

.baris-berlangganan {
  display: flex;
  gap: 10px;
}

.baris-berlangganan .kolom-teks,
.baris-berlangganan .tombol-kirim {
  font: inherit;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.baris-berlangganan .tombol-kirim {
  background-color: #1f6f54;
  color: #fdfaf3;
}

Dengan font, padding, dan border yang identik, kolom email dan tombol Berlangganan pada demo berikut berdiri sama tinggi:

Bila keduanya tetap beda tinggi, periksa apakah font-size-nya berbeda — satu piksel pun pada huruf akan mengubah tinggi kotaknya.

Ring Fokus Sederhana #

Garis bawaan browser untuk state fokus sering bentrok dengan border yang baru kita buat. Untuk chapter ini, recipe yang cukup adalah outline dengan :focus-visible, seperti yang dibahas pada section Pseudo-classes: outline tidak memakan ruang layout dan tetap terlihat jelas. Kita akan menyempurnakan ring ini — termasuk versi box-shadow yang menempel pada radius — pada chapter Focus States di section ini.

Kesalahan Umum #

Ringkasan #

Menata input dimulai dari dua fakta bawaan: kontrol form tidak mewarisi font, tetapi sudah memakai border-box. Dari situ resep dasarnya pendek — font: inherit, padding yang lega, border dan radius yang konsisten, plus ring fokus yang tetap terlihat. Dengan menjaga kesamaan font, padding, dan border antara input dan tombol, keduanya akan sejajar tanpa trik tambahan. Chapter berikutnya melengkapi resep ini untuk dua control yang punya tantangan sendiri: textarea dengan pegangan resize-nya dan select dengan tampilan bawaan yang membandel.