Tampilan bentuk HTML dapat sangat ditingkatkan dengan CSS:
Styling Bidang Masukan
Gunakan width properti untuk menentukan lebar kolom input:
Contoh di atas berlaku untuk semua <input> elemen. Jika Anda hanya ingin gaya jenis masukan tertentu, Anda dapat menggunakan penyeleksi atribut:
-
input[type=text]- hanya akan memilih bidang teks -
input[type=password]- hanya akan memilih field kata sandi -
input[type=number]- hanya akan memilih nomor kolom - dll ..
empuk Input
Gunakan padding properti untuk menambah ruang di dalam kolom teks.
Tip: Bila Anda memiliki banyak masukan setelah satu sama lain, Anda mungkin juga ingin menambahkan beberapa margin , untuk menambahkan lebih banyak ruang di luar dari mereka:
Contoh
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
} Cobalah sendiri "  | Perhatikan bahwa kita telah mengatur box-sizing properti untuk border-box . Hal ini memastikan bahwa padding dan akhirnya perbatasan termasuk dalam total lebar dan tinggi dari elemen. Baca lebih lanjut tentang box-sizing properti di kami CSS3 Box Ukuran bab. |
|---|
Polos Input
Gunakan border properti untuk mengubah ukuran perbatasan dan warna, dan menggunakan border-radius properti untuk menambahkan sudut dibulatkan:
Jika Anda hanya ingin batas bawah, menggunakan border-bottom properti:
berwarna Input
Gunakan background-color properti untuk menambahkan warna latar belakang untuk input, dan color properti untuk mengubah warna teks:
Input terfokus
Secara default, beberapa browser akan menambahkan garis biru di sekitar input ketika mendapat fokus (diklik). Anda dapat menghapus perilaku ini dengan menambahkan outline: none; untuk input.
Gunakan :focus pemilih untuk melakukan sesuatu dengan field input ketika akan fokus:
Input dengan icon / gambar
Jika Anda ingin sebuah ikon dalam input, menggunakan background-image properti dan posisi itu dengan background-position properti. Juga perhatikan bahwa kita menambahkan padding kiri besar untuk memesan ruang ikon:
Contoh
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
} Cobalah sendiri " Animated Cari Masukan
Dalam contoh ini kita menggunakan CSS3 transition properti untuk menghidupkan lebar input pencarian ketika mendapat fokus. Anda akan belajar lebih banyak tentang transition properti kemudian, di kami CSS3 Transisi bab.
Contoh
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} Cobalah sendiri " styling dihapus saja
Tip: Gunakan resize properti untuk mencegah dihapus saja dari yang ukurannya (menonaktifkan "grabber" di pojok 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;
} Cobalah sendiri " Styling Pilih Menu
Contoh
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
} Cobalah sendiri " Styling Tombol Masukan
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;
}
/* Tip: use width: 100% for full-width buttons */ Cobalah sendiri " Untuk informasi lebih lanjut tentang bagaimana gaya tombol dengan CSS, baca CSS Buttons Tutorial .