Form CSS


Tampilan formulir HTML dapat ditingkatkan dengan CSS.


Kolom Input Style

Gunakan properti width untuk menentukan lebar bidang input:


Contoh

input {
  width: 100%;
}

Contoh di atas berlaku untuk semua elemen <input>. Jika kita hanya ingin menata tipe input tertentu, kita dapat menggunakan selektor atribut:

  • input[type=text] - hanya akan memilih kolom teks
  • input[type=password] - hanya akan memilih kolom kata sandi
  • input[type=number] - hanya akan memilih kolom angka
  • dll..

Padding Input

Gunakan properti padding untuk menambahkan ruang di dalam kolom teks:


Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Perhatikan contoh diatas bahwa properti box-sizing telah diset ke border-box. Ini untuk memastikan bahwa padding dan border disertakan dalam total lebar dan tinggi elemen.

Tips: Jika memiliki banyak kolom input setelah kolom lainnya, kita dapat menambahkan beberapa margin, untuk menambahkan lebih banyak ruang di antara kolom sehingga tampilan lebih rapi.


Border Input

Gunakan properti border untuk mengubah ukuran dan warna border, dan gunakan properti border-radius untuk membuat sudut yang membulat:


Contoh

input[type=text] {
  border: 2px solid blue;
  border-radius: 4px;
}

Jika Anda hanya menginginkan batas bawah, gunakan properti border-bottom:


Contoh

input[type=text] {
  border: none;
  border-bottom: 2px solid blue;
}

Warna Input

Gunakan properti background-color untuk menambahkan warna background ke input, dan properti color untuk mengubah warna teks:


Contoh

input[type=text] {
  background-color: #303F9F;
  color: white;
}

Fokus Input

Secara default, beberapa browser akan menambahkan garis biru di sekitar input saat mendapatkan fokus (diklik). Anda dapat menghapus sistem ini dengan menambahkan outline: none; ke input.

Gunakan selektor :focus untuk melakukan sesuatu dengan kolom input saat mendapatkan fokus:


Contoh

input[type=text]:focus {
  background-color: lightblue;
}

Ikon/Gambar Input

Jika menginginkan ikon di dalam input, gunakan properti background-image dan posisikan dengan properti background-position. Perhatikan juga bahwa kami menambahkan padding kiri yang besar untuk memperbesar ruang ikon:


Contoh

input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

Animasi Pencarian Input

Dalam contoh ini kita menggunakan properti CSS transition untuk menganimasikan lebar input pencarian saat mendapatkan fokus. Anda akan mempelajari lebih lanjut tentang properti transition nanti di postingan Transisi CSS.


Contoh

input[type=text] {
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

Style Textarea

Tips: Gunakan properti resize untuk mencegah textareas diubah ukurannya (nonaktifkan "grabber" di sudut kanan bawah):


Contoh

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Style Pilihan Menu


Contoh

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Style Tombol Input


Contoh

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

Sumber referensi: w3schools

Komentar

Posting Komentar