Kotak input input adalah komponen yang sangat diperlukan dari halaman web, tetapi setiap browser memiliki gaya tampilan kotak input yang berbeda.
Misalnya:
Gambar di atas adalah kotak input yang dilengkapi dengan Google Chrome dan IE Browser, dan gayanya tidak memuaskan, jadi kebanyakan dari mereka akan menulis gaya sendiri.
Berikut ini adalah gaya kotak teks sederhana
input {border: 1px solid #ccc; padding: 7px 0px; Border-Radius: 3px; / *Atribut CSS3 IE tidak mendukung */ padding-left: 5px; } Gambar reproduksi:
Makna atribut gaya:
Perbatasan: 1px solid #ccc; /*Atur batas kotak input, warna, ukuran, dan garis putus -putus padat dari garis tepi*/
padding: 7px 0px; /* Atur ketinggian kotak input, Anda juga dapat menggunakan tinggi, tetapi jika Anda menggunakan tinggi, kursor kotak input akan ditempatkan di bagian atas, dan gaya lain harus diatur untuk memperbaikinya, dan mungkin tidak kompatibel.
Border-Radius: 3px; / *Batu properti di dalam css3, yaitu tidak mendukung */
Padding-left: 5px; /*Biarkan iklan menjadi 5 piksel dari kiri, dan pada awalnya kursor terpasang di tepi kotak input di sebelah kiri*/
Pada dasarnya, gaya di atas lebih umum digunakan saat ini, dan kemudian beberapa pengaturan input lainnya
Misalnya: Atribut placeholder
Properti ini memiliki efek teks yang cepat di kotak input. Properti CSS3 tidak mendukung IE
Input Klik untuk Glow Efek Khusus:
input {border: 1px solid #ccc; padding: 7px 0px; Border-Radius: 3px; Padding-left: 5px; -webkit-box-shadow: inset 0 1px 1px rgba (0,0,0, .075); Kotak-Shadow: Inset 0 1px 1px RGBA (0,0,0, .075); -webkit-transisi: kemudahan warna-dalam-out.15s, -webkit-box-shadow kemudahan-out.15s; -O-transisi: kemudahan-dalam-out-out.15s, box-shadow kemudahan .15s; Transisi: Perbatasan-Wolor-In-Out .15S, Kotak-Shadow .15s} Input: Fokus {Border-Color: #66AFE9; Garis Besar: 0; -webkit-box-shadow: inset 0 1px 1px rgba (0,0,0, .075), 0 0 8px RGBA (102.175.233, .6); Kotak-Shadow: Inset 0 1px 1px RGBA (0,0,0, .075), 0 0 8px RGBA (102.175.233, .6)} Gambar reproduksi: