Placeholder, elemen teks yang sering berwarna abu-abu di dalam input, bisa jadi sulit untuk ditata. Untungnya kami telah mendapatkan solusi CSS yang singkat namun efektif untuk memberi gaya pada teks placeholder masukan Anda dengan warna dan opacity apa pun yang Anda inginkan. Baca terus untuk mengetahui kodenya.
Mengubah warna teks placeholder
Mari kita mulai dengan masukan sederhana dan beberapa teks placeholder, untuk contoh ini kita akan menggunakan kata "pencarian" tetapi Anda dapat menggunakan apa pun yang Anda inginkan. HTML dasarnya ada di bawah ini:
HTML
Teks placeholder input (dan area teks) defaultnya adalah warna abu-abu terang, namun kita dapat mengubahnya dengan beberapa baris CSS. Di sini kita akan mewarnai masukan teks berwarna merah menggunakan nama warna HTML, tetapi metode warna apa pun sudah cukup (HEX, RGB, HSL).
CSS
::-webkit-input-placeholder ( /* Chrome */ warna: merah; ) :-ms-input-placeholder ( /* IE 10+ */ warna: merah; ) ::-moz-placeholder ( /* Firefox 19 + */ warna: merah; opasitas: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ warna: merah; opasitas: 1; )Perhatikan bahwa penting untuk menyertakan awalan vendor yang berbeda untuk mendukung sebanyak mungkin browser. Hanya teks placeholder masukan Firefox yang defaultnya sedikit transparan sehingga tidak perlu mengatur properti opacity di IE atau Chrome.
Mengubah warna teks fokus placeholder
Baiklah, kita telah berhasil mengubah warna teks placeholder menjadi merah, tapi alangkah baiknya jika terjadi sesuatu saat pengguna mengklik di dalam masukan kita. Dengan menggunakan properti CSS awalan vendor yang sama, kita dapat mengubah opasitas teks placeholder masukan pada fokus.
CSS
input ( outline: none; padding: 12px; border-radius: 3px; border: 1px solid black; ) ::-webkit-input-placeholder ( /* Chrome */ color: red; transisi: opacity 250ms ease-in-out ; ) :fokus::-webkit-input-placeholder ( opacity: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ warna: merah; transisi: opacity 250ms kemudahan masuk-keluar; ):fokus :-ms-input-placeholder ( opacity: 0.5; ) ::-moz-placeholder ( /* Firefox 19+ */ color: red; opacity: 1; transisi: opacity 250ms ease-in-out; ):fokus:: -moz-placeholder ( opacity: 0.5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ warna: merah; opacity: 1; transisi: opacity 250ms kemudahan masuk-keluar; ) :fokus:-moz-placeholder (opasitas: 0,5; )Pada contoh di atas kita telah memasukkan beberapa gaya dasar pada input itu sendiri, dan menambahkan transisi pada opacity untuk membuat pengalamannya sedikit lebih baik. Lihat demo dan bereksperimen dengan properti dan transisi CSS lainnya.
Placeholder adalah kelas semu atau elemen semu yang bertanggung jawab untuk menampilkan nama bidang. Pada intinya, ini adalah tag (sebut saja untuk kesederhanaan) di mana Anda memasukkan sebuah kata, dan pengguna melihatnya di dalamnya. Semacam petunjuk atau nama untuk setiap bidang formulir.
Setiap browser menangani tag ini secara berbeda, dan gayanya masih menyisakan banyak hal yang diinginkan. Untuk mengubah gaya default, cukup tambahkan beberapa baris kode ke file gaya. Tidak ada yang rumit.
Namun, perlu diingat bahwa tidak semuanya bisa kita ubah.
Di antara beragam gaya, dalam hal ini hal-hal berikut tersedia bagi kita:
- font-weight — mengatur bobot teks
- ukuran font — memilih ukuran teks
- font-family - pemilihan font
- latar belakang - latar belakang dan gambar latar belakang
- warna — warna teks
- spasi kata - mengatur spasi antar kata
- spasi huruf - mengatur jarak antar huruf
- dekorasi teks — pilihan dekorasi kata. Digarisbawahi, dicoret, dll.
- vertical-align — mengatur perataan vertikal
- text-transform - pilihan untuk mengubah teks. Semua dalam huruf besar atau kecil, dll.
- line-height — jarak antar baris
- text-indent - menyetel indentasi kiri untuk baris pertama paragraf
- text-overflow - pilihan untuk menampilkan teks yang tidak sesuai dengan blok (menyembunyikan atau memotong dan menambahkan elipsis)
- opacity — pilih transparansi elemen
Sekarang kita telah memahami gaya yang tersedia, kita dapat mulai mendesain, untuk ini kita akan menambahkan gaya berikut:
::-webkit-input-placeholder ( warna: #2cb04d; )
::-moz-placeholder ( warna: #2cb04d; )/* Firefox 19+ */
:-moz-placeholder ( warna: #2cb04d; ) /*Firefox 18- */
:-ms-input-placeholder ( warna: #2cb04d; )
Setelah menambahkan baris ini, warna nama di dalam kolom formulir akan berubah dan akan sama di setiap browser. Anda dapat menambahkan gaya tambahan di sini.
Misalnya saja gaya ini
::-webkit-input-placeholder (warna: #2cb04d; ukuran font: 1,5em; berat font: 600;)
::-moz-placeholder (warna:#2cb04d; ukuran font:1,5em; berat font:600;) /*Firefox 19+*/
:-moz-placeholder (warna:#2cb04d; ukuran font:1,5em; berat font:600;) /*Firefox 18-*/
:-ms-input-placeholder (warna: #2cb04d; ukuran font: 1,5em; berat font: 600;)
Tambahkan warna, ukuran besar dan teks tebal sedang. Jika Anda menambahkan properti tambahan —
text-overflow:ellipsis maka teks akan dipangkas agar sesuai dengan bidang dan elipsis akan ditambahkan di akhir.
Ada properti menarik lainnya: berkat tampilan animasi di css (gaya), Anda dapat mengonfigurasi persembunyian yang indah saat menempatkan kursor di suatu bidang. Sebelumnya, ini dilakukan menggunakan js (scripts)
Input::-webkit-input-placeholder (opasitas: 1; transisi: opacity 0,3 detik kemudahan;)
.input::-moz-placeholder (opacity: 1; transisi: opacity 0,3s kemudahan;)
.input:-moz-placeholder (opasitas: 1; transisi: opacity 0,3 detik kemudahan;)
.input:-ms-input-placeholder (opacity: 1; transisi: opacity 0,3s kemudahan;)
.input:focus::-webkit-input-placeholder (opacity: 0; transisi: opacity 0,3 detik kemudahan;)
.input:focus::-moz-placeholder (opasitas: 0; transisi: opacity 0,3 detik kemudahan;)
.input:focus:-moz-placeholder (opasitas: 0; transisi: opacity 0,3 detik kemudahan;)
.input:focus:-ms-input-placeholder (opasitas: 0; transisi: opacity 0,3 detik kemudahan;)
Menambahkan gaya seperti itu akan memungkinkan placeholder memudar dengan mulus saat kursor ditempatkan di bidang
.input adalah kelas elemen formulir. Agar gaya berfungsi, kode bidang formulir akan terlihat seperti ini:
Atau Anda dapat menggunakan kelas elemen. Dengan cara ini Anda dapat mengatur gaya berbeda untuk setiap formulir.
.input formulir formulir kontak::-webkit-input-placeholder (warna: #2cb04d; ukuran font: 1,5em; berat font: 600;)
.input formulir formulir kontak::-moz-placeholder (warna: #2cb04d; ukuran font: 1,5em; berat font: 600;)/*Firefox 19+*/
.input formulir formulir kontak:-moz-placeholder (warna: #2cb04d; ukuran font: 1,5em; berat font: 600;)/*Firefox 18-*/
.input formulir formulir kontak:-ms-input-placeholder (warna: #2cb04d; ukuran font: 1,5em; berat font: 600;)
Dengan cara sederhana ini Anda dapat membuat desain bentuk yang sangat indah.
Biasanya atribut placeholder pada input dan textarea digunakan untuk memberikan ajakan bertindak dalam elemen tersebut. Dalam postingan kali ini saya akan menjelaskan beberapa opsi untuk menata teks placeholder, serta opsi untuk animasinya
Jadi, warna teks placeholder kita dapat diubah menggunakan, misalnya, serangkaian aturan CSS berikut:
::-webkit-input-placeholder ( warna : #c0392b ;) ::-moz-placeholder ( warna : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( warna : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( warna : #c0392b ;)
Panjangnya kode untuk menata gaya properti sederhana tersebut disebabkan oleh kurangnya standar umum, dan oleh karena itu setiap browser telah menerapkan dukungan untuk gaya placeholder dengan caranya sendiri.
Selain itu, tidak semua didukung properti css. Berikut adalah daftar properti yang didukung:
font (dan terkait)
latar belakang (dan terkait)
warna
spasi kata
spasi huruf
dekorasi teks
perataan vertikal
transformasi teks
tinggi garis
indentasi teks
teks-melimpah
kegelapan
Hal ini juga terjadi bahwa teks placeholder "memanjang" melampaui lebar elemen input atau textarea (kasus umum untuk perangkat seluler). Pada saat yang sama, secara otomatis terpotong tidak sedap dipandang.
Properti CSS seperti text-overflow: ellipsis akan membantu kita memperbaiki masalah ini, yang akan menambahkan elipsis estetika ke area yang dipotong di placeholder. Dalam gaya kami menulis seperti ini:
masukan [ placeholder ] ( text-overflow : ellipsis ;) masukan ::-moz-placeholder ( text-overflow : ellipsis ;) masukan :-moz-placeholder ( text-overflow : ellipsis ;) masukan :-ms-input-placeholder ( luapan teks : elipsis ;)
Untuk menambahkan lebih banyak estetika pada placeholder kami, dimungkinkan untuk menambahkan efek menyembunyikannya saat elemen terkait menerima fokus.
Beberapa contoh penyembunyian tersebut dengan elemen animasi:
/* perubahan halus dalam transparansi placeholder saat fokus */.input ::-webkit-input-placeholder ( opacity : 1 ; transisi : opacity 0,3s kemudahan ;) .input ::-moz-placeholder ( opacity : 1 ; transisi : opacity 0,3s kemudahan ;).input :-moz- placeholder (opacity: 1; transisi: opacity 0,3s kemudahan;).input:-ms-input-placeholder (opacity: 1; transisi: opacity 0,3s kemudahan;).input (opacity: 0; transisi: opacity 0,3s kemudahan; ) .input :focus::-moz-placeholder ( opacity : 0 ; transisi : opacity 0,3s kemudahan ;).input :focus:-moz-placeholder ( opacity : 0 ; transisi : opacity 0,3s kemudahan ;).input :focus :-ms-input-placeholder ( opacity : 0 ; transisi : opacity 0,3 detik kemudahan ;) /* menggeser placeholder ke kanan saat fokus */.input ::-webkit-input-placeholder ( text-indent : 0px ; transisi : text-indent 0,3s kemudahan ;) .input ::-moz-placeholder ( text-indent : 0px ; transisi : text-indent 0,3s kemudahan ;).input :-moz-placeholder ( text-indent : 0px ; transisi : text-indent 0,3s kemudahan ;).input :-ms-input-placeholder ( text-indent : 0px ; transisi : text-indent 0,3s kemudahan ;).masukan :fokus::-webkit-input-placeholder( indentasi teks : 500px ; transisi : indentasi teks 0,3 detik kemudahan ;).input :fokus::-moz-placeholder ( indentasi teks : 500px ; transisi : indentasi teks 0,3 detik kemudahan ;).input :fokus:- moz-placeholder ( text-indent : 500px ; transisi : text-indent 0,3s kemudahan ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; transisi : text-indent 0,3s kemudahan ;) /* menggeser placeholder ke bawah saat fokus */.input ::-webkit-input-placeholder ( line-height : 20px ; transisi : line-height 0,5s kemudahan ;) .input ::-moz-placeholder ( line-height : 20px ; transisi : line-height 0,5s kemudahan ;).input :-moz-placeholder ( line-height : 20px ; transisi : line-height 0,5s kemudahan ;).input :-ms-input-placeholder ( line-height : 20px ; transisi : line-height 0,5s ease ;).masukan :fokus::-webkit-input-placeholder( tinggi garis : 100px ; transisi : tinggi garis 0,5 detik kemudahan ;).input :fokus::-moz-placeholder ( tinggi garis : 100px ; transisi : tinggi garis 0,5 detik kemudahan ;).input :fokus:- moz-placeholder ( line-height : 100px ; transisi : line-height 0,5s kemudahan ;).input :focus:-ms-input-placeholder ( line-height : 100px ; transisi : line-height 0,5s ease ;)
Mari kita selesaikan di sini.
Placeholder adalah elemen kolom input tempat tooltip dapat ditempatkan. Saat pengguna mulai memasukkan data, teks pendukungnya dihilangkan agar tidak mengganggu. Setiap browser memiliki pendapatnya sendiri tentang bagaimana elemen ini harus ditampilkan, dan terkadang gaya default merusak keseluruhan desain. Untuk mengelolanya, Anda perlu menggunakan aturan placeholder CSS khusus.
Di mana penggantinya?
Masalahnya adalah tooltip kolom masukan tersembunyi dengan aman di shadow DOM dan tidak mudah untuk dijangkau. Untuk ini, ::placeholder non-standar khusus digunakan. Dengan bantuannya Anda dapat mengelola properti tooltip.
Menata placeholder di CSS terlihat seperti ini:
Input::placeholder ( warna: merah; opacity: 1; gaya font: miring; )
Dukungan peramban
Elemen semu placeholder CSS ditangani dengan baik oleh semua orang browser modern, dan untuk mendukung browser lama Anda dapat menggunakan awalan:
- ::-webkit-input-placeholder - untuk browser webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - untuk Peramban Firefox di atas versi 19;
- :-moz-placeholder - untuk Firefox lama;
- :-ms-input-placeholder - untuk Penjelajah Internet di atas versi 10.
Seperti yang Anda lihat, tua Peramban Mozilla, serta IE, anggap placeholder sebagai kelas semu CSS, bukan elemen semu. Jangan berdebat dengan mereka, kami hanya akan mempertimbangkan aspek ini saat menata gaya kolom input.
Pilihan gaya
Anda dapat mengatur opsi berikut untuk elemen semu placeholder di CSS:
- latar belakang - grup blok tooltip berlaku untuk seluruh kolom masukan. Anda tidak hanya dapat mengatur warna (warna latar), tetapi juga gambar (gambar latar).
- warna teks - warna;
- transparansi - opacity;
- menggarisbawahi, menggarisbawahi atau mencoret - dekorasi teks;
- case - transformasi teks;
- indentasi internal - padding. Tidak didukung oleh semua browser. Seperti halnya elemen sebaris, padding atas dan bawah diabaikan.
- tampilan font - properti grup font, tinggi garis dan berbagai indentasi (indentasi teks, spasi huruf, spasi kata);
- perataan vertikal dalam satu garis - perataan vertikal;
- memangkas teks saat wadah meluap - text-overflow.
Dalam Fokus
Secara default, tooltip menghilang dari kolom input hanya jika setidaknya satu karakter dimasukkan ke dalamnya. Namun placeholder memungkinkan Anda menerapkan penghilangan secara langsung saat fokus di lapangan. Untuk melakukan ini, Anda perlu menggabungkannya dengan kelas semu: fokus.
Masukan:fokus::placeholder ( warna: transparan; )
Di beberapa browser, dimungkinkan untuk menganimasikan perubahan di sejumlah properti placeholder menggunakan pernyataan transisi.
Input::placeholder ( warna: hitam; transisi: warna 1s; ) input:fokus::placeholder ( warna: putih; )
Di peramban Google Chrome Saat memfokuskan pada bidang seperti itu, warna petunjuk akan berubah dengan mulus dalam satu detik.
Placeholder adalah elemen kolom input tempat tooltip dapat ditempatkan. Saat pengguna mulai memasukkan data, teks pendukungnya dihilangkan agar tidak mengganggu. Setiap browser memiliki pendapatnya sendiri tentang bagaimana elemen ini harus ditampilkan, dan terkadang gaya default merusak keseluruhan desain. Untuk mengelolanya, Anda perlu menggunakan aturan placeholder CSS khusus.
Di mana penggantinya?
Masalahnya adalah tooltip kolom masukan tersembunyi dengan aman di shadow DOM dan tidak mudah untuk dijangkau. Untuk melakukan ini, elemen semu CSS::placeholder non-standar khusus digunakan. Dengan bantuannya Anda dapat mengelola properti tooltip.
Anda akan tertarik:
Menata placeholder di CSS terlihat seperti ini:
input::placeholder ( warna: merah; opacity: 1; gaya font: miring; ) 
Dukungan peramban
Elemen semu placeholder CSS ditangani dengan baik oleh semua browser modern, dan untuk mendukung browser lama Anda dapat menggunakan awalan berikut:
- ::-webkit-input-placeholder - untuk browser webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - untuk browser Firefox di atas versi 19;
- :-moz-placeholder - untuk Firefox lama;
- :-ms-input-placeholder - untuk Internet Explorer di atas versi 10.
Seperti yang Anda lihat, browser Mozilla lama, serta IE, menganggap placeholder sebagai kelas semu CSS dan bukan elemen semu. Jangan berdebat dengan mereka, kami hanya akan mempertimbangkan aspek ini saat menata gaya kolom input.
Pilihan gaya
Anda dapat mengatur opsi berikut untuk elemen semu placeholder di CSS:
- latar belakang - sekelompok properti latar belakang. Latar belakang blok petunjuk meluas ke seluruh kolom masukan. Anda tidak hanya dapat mengatur warna (warna latar), tetapi juga gambar (gambar latar).
- warna teks - warna;
- transparansi - opacity;
- menggarisbawahi, menggarisbawahi atau mencoret - dekorasi teks;
- case - transformasi teks;
- indentasi internal - padding. Tidak didukung oleh semua browser. Seperti halnya elemen sebaris, padding atas dan bawah diabaikan.
- tampilan font - properti grup font, tinggi garis dan berbagai indentasi (indentasi teks, spasi huruf, spasi kata);
- perataan vertikal dalam satu garis - perataan vertikal;
- memangkas teks saat wadah meluap - text-overflow.
Input1::placeholder ( gambar latar: gradien linier(kapur, biru); warna: putih; ) .input2::placeholder ( dekorasi teks: garis tembus; warna: ungu; berat font: tebal; ) .input3 ::placeholder ( ukuran font: 16px; spasi huruf: 10px; ) .input4::placeholder ( latar belakang: coklat; warna: putih; luapan teks: elipsis; )
Dalam Fokus
Secara default, tooltip menghilang dari kolom input hanya jika setidaknya satu karakter dimasukkan ke dalamnya. Namun elemen semu placeholder CSS memungkinkan Anda menerapkan fading dengan segera saat memfokuskan pada bidang. Untuk melakukan ini, Anda perlu menggabungkannya dengan kelas semu: fokus.
masukan:fokus::placeholder ( warna: transparan; )
Di beberapa browser, dimungkinkan untuk menganimasikan perubahan di sejumlah properti placeholder menggunakan pernyataan transisi.
input::placeholder ( warna: hitam; transisi: warna 1s; ) input:fokus::placeholder ( warna: putih; )
DI DALAM peramban Google Warna tooltip Chrome saat memfokuskan pada bidang tersebut akan berubah dengan lancar dalam satu detik.