Styling Textarea dan Select

Setelah input teks, dua control yang paling sering muncul dalam form adalah textarea untuk teks panjang dan select untuk pilihan dari daftar. Keduanya membawa perilaku bawaan yang tidak dimiliki input biasa: textarea dilengkapi pegangan resize di sudutnya, sedangkan select digambar utuh oleh sistem operasi sehingga sulit disamakan dengan desain halaman. Kita akan mengendalikan keduanya — menata resize secara sadar, mengganti chrome select dengan appearance: none, lalu menyatukan semuanya dalam satu resep yang dipakai input, textarea, dan select sekaligus.

Textarea: Resize dan min-height #

textarea diatur browser sebagai kotak yang bisa ditarik dari sudut kanan bawah. Perilaku ini diatur property resize:

Resep yang nyaman untuk textarea adalah membatasi perubahan ke arah vertikal dan memberi tinggi minimum, sehingga layout kolomnya tidak bisa digeser pengguna secara horizontal:

.kolom-pesan {
  font: inherit;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  padding: 10px 14px;
  border: 1px solid #c7d2cb;
  border-radius: 10px;
  background-color: #fdfaf3;
  color: #1f2933;
}

Tarik pegangan di sudut kanan bawah textarea berikut: tingginya bertambah, lebarnya tetap mengikuti wadah:

Perhatikan font: inherit tetap ada di resep: tanpa baris itu, teks di dalam textarea memakai font monospace bawaan yang berbeda dari halaman.

Property resize membatasi arah tumbuhnya kolom, tetapi kolom yang bisa tumbuh juga butuh batas bawah yang layak. Tanpa min-height, textarea bawaan tampil setinggi dua baris saja — terlalu sempit untuk teks panjang — dan pengguna bahkan bisa menariknya lebih kecil lagi. Attribute rows="4" pada HTML menawarkan ukuran awal yang mirip, tetapi min-height dijaga CSS terus-menerus: kolom tidak pernah lebih pendek dari batas itu, apa pun yang dilakukan pegangannya. Bila pertumbuhannya perlu dibatasi juga, pasangkan dengan max-height.

Select: appearance none dan Panah Kustom #

Tampilan select ditentukan sistem operasi: bentuk kotak, ketebalan border, dan panahnya semua digambar bawaan. Property appearance: none menghapus kulit bawaan itu sehingga select tampil seperti kotak polos, lalu kita pasang sendiri panahnya sebagai background image berupa SVG data URI:

.kolom-kota {
  font: inherit;
  appearance: none;
  width: 100%;
  padding: 10px 40px 10px 14px;
  border: 1px solid #c7d2cb;
  border-radius: 10px;
  background-color: #fdfaf3;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2336423c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: #1f2933;
}

Buka select berikut — panah chevron di sisi kanannya digambar dari SVG data URI:

Mari kita telaah bagian yang baru:

1. appearance: none: memerintahkan browser melepas seluruh gambar bawaan control; select menjadi kotak kosong yang siap ditata.
2. padding: 10px 40px 10px 14px: sisi kanan diberi ruang 40px agar teks pilihan tidak menabrak panah.
3. background: url(...) no-repeat right 14px center: satu baris shorthand yang memasang panah SVG tanpa pengulangan, diposisikan 14px dari tepi kanan dan menengah secara vertikal.
4. %2336423c: karakter # pada kode warna SVG wajib ditulis %23 di dalam data URI, karena # punya makna khusus pada URL.

Bentuk data URI ini memang padat, tetapi polanya tetap: sebuah SVG mini yang di-encode, dipasang sebagai background, bukan gambar eksternal.

Satu Resep untuk Ketiganya #

Karena input, textarea, dan select kini berbagi tujuan visual yang sama, masuk akal menata mereka dengan satu class yang sama. Perbedaannya hanya dua: textarea butuh resize: vertical dan min-height, sedangkan select butuh appearance: none plus panah:

<input class="kolom-form" type="text">
<textarea class="kolom-form kolom-panjang"></textarea>
<select class="kolom-form kolom-pilihan"> ... </select>

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

.kolom-panjang {
  min-height: 120px;
  resize: vertical;
}

.kolom-pilihan {
  appearance: none;
  padding-right: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2336423c' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}

Pola class dasar plus class tambahan ini sama dengan pola varian pada tombol yang akan kita latih pada chapter Styling Buttons.

Ringkasan #

textarea dan select menuntut dua penanganan khusus di atas resep input dasar: property resize yang mengatur pegangan penarik, dan appearance: none yang membuka jalan menata select sendiri lengkap dengan panah dari SVG data URI. Dengan satu class dasar plus class tambahan per control, seluruh form tampil seragam tanpa duplikasi kode. Chapter berikutnya naik ke kontrol paling sulit ditata: checkbox dan radio, beserta dua pendekatan untuk menjinakkannya.