CSS FORMS

Tampilan kode HTML bisa di tingkatkan atau dipercantik dengan CSS, contohnya:

Styling Input Fields

Gunakan properti "widht" untuk menentukan lebar kolom input. Contoh:

Contoh kode

Hasil

Contoh diatas berlaku untuk semua <input> elemen. Jika anda hanya ingin gaya masukan tertentu anda dapat menggunakan atribut selector:

• input[type=text] => Hanya akan memilih fields teks
• input[type=password] => Hanya akan memilih fields kata sandi
• input[type=number] => Hanya akan memilih fields nomor

Padded inputs

Gunakan properti "padding" untuk menambahkan ruang di dalam kolom teks. Contoh:

Bordered inputs

Gunakan properti "border" untuk mengubah ukuran border dan warna, dan gunakan properti border-radius untuk menambahkan kebulatan sudut.

Jika anda hanya ingin batas bawah, gunakan properti "border-bottom"

Colored Inputs

Gunakan properti "background-color" untuk menambahkan warna latar belakang dan properti "color" untuk menambah warna

Focused inputs

Secara default, beberapa browser akan menambahkan garis biru di sekitar input ketika mendapat fokus (di klik).
Gunakan focus selector untuk melakukan sesuatu dengan field input ketika akan fokus.

Input with icon/image

Jika anda ingin sebuah icon dalam input, gunakan properti "background-image" dan posisikan dengan "background-position"

Animated search input