Apakah gaya karet input teks?
Dalam input teks HTML, anda boleh melihat tanda yang muncul dalam teks, dipanggil karet input teks. Ia juga dikenali sebagai kursor input teks.
Dalam tutorial ini, kita akan belajar menggayakan karet input teks. Walau bagaimanapun, kami hanya boleh menukar warna karet input teks kerana penyemak imbas moden tidak menyokong perubahan bentuk.
tatabahasa
Pengguna boleh menggunakan sifat CSS 'warna karet' untuk menukar warna karet input teks dengan mengikut sintaks di bawah.
caret-color: color;
Dalam input di atas, 'warna' boleh menjadi nama warna dalam format rentetan, nilai perenambelasan, nilai rgb atau nilai HSL.
Terjemahan bahasa Cina bagiContoh 1
ialah:Contoh 1
Dalam contoh di bawah, kami telah mentakrifkan dua input teks dan memberikan nama kelas "inp" dan "inp1". Kami menetapkan warna "merah" kepada elemen input pertama menggunakan sifat CSS "warna karet".
Selain itu, kami menggunakan nilai 'auto' dalam elemen input kedua. Dalam output, pengguna boleh memerhati kursor merah dalam kotak input pertama dan kursor hitam dalam kotak input kedua, kerana nilai auto mengambil warna lalai penyemak imbas, iaitu hitam dalam kebanyakan kes.
<html>
<head>
<style>
.inp {
caret-color: red;
}
.inp1 {
caret-color: auto;
}
</style>
</head>
<body>
<h3 id="Using-the-i-caret-color-i-CSS-property-to-style-the-text-input-caret">Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<input type = "text" placeholder = "Write something here." class = "inp">
<br> <br>
<input type = "text" placeholder = "Write something here." class = "inp1">
</body>
</html>
Contoh 2
Dalam contoh di bawah, kami menggunakan "transparent" sebagai nilai sifat CSS "color-caret" untuk menetapkan warna lutsinar kursor. Pada asasnya, kita boleh menggunakannya apabila kita perlu menyembunyikan kursor input teks.
Dalam output, pengguna boleh melihat bahawa mereka boleh memasukkan teks dalam kotak input tetapi tidak dapat melihat kursor.
<html>
<head>
<style>
.inp {
caret-color: transparent;
}
</style>
</head>
<body>
<h3 id="Using-the-i-caret-color-i-CSS-property-to-style-the-text-input-caret">Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<input type = "text" placeholder = "Your Good name" class = "inp">
</body>
</html>
Contoh 3
Dalam contoh di bawah, kami telah menambah teks di dalam elemen div. Selepas itu, kami menggunakan atribut 'contenteditable' dengan nilai sebenar untuk elemen div, yang menjadikan kandungan elemen div boleh diedit.
Di sini kami menggayakan kursor input teks bagi elemen div boleh diedit dan memberikannya warna merah jambu yang boleh diperhatikan oleh pengguna dalam output.
<html>
<head>
<style>
.test {
caret-color: pink;
}
</style>
</head>
<body>
<h3 id="Using-the-i-caret-color-i-CSS-property-to-style-the-text-input-caret">Using the <i> caret-color </i> CSS property to style the text input caret</h3>
<div class = "test" contenteditable = "true">
This div is editable. Click anywhere on the text to start editing. Observe the Pink color of the cursor.
</div>
</body>
</html>
Pengguna belajar menggunakan sifat CSS "warna karet" untuk menggayakan karet input teks. Walau bagaimanapun, sesetengah penyemak imbas lama turut menyokong atribut 'bentuk karet', yang menggunakan mana kita boleh menukar bentuk kursor, tetapi pelayar moden tidak menyokongnya.
Atas ialah kandungan terperinci Apakah gaya karet input teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
Bekerja dengan Caching Graphql
Mar 19, 2025 am 09:36 AM
Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
