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!
Draggin ' dan Droppin ' dalam ReactApr 17, 2025 am 11:52 AMEkosistem React menawarkan kita banyak perpustakaan yang semuanya memberi tumpuan kepada interaksi seret dan penurunan. Kami mempunyai React-Dnd, React-Beautiful-Dnd,
Perisian CepatApr 17, 2025 am 11:49 AMTerdapat beberapa perkara yang saling berkaitan dengan perisian cepat sejak kebelakangan ini.
Kecerunan bersarang dengan klip latar belakangApr 17, 2025 am 11:47 AMSaya tidak boleh mengatakan saya menggunakan klip latar belakang semua yang kerap. Saya ' Tetapi saya diingatkan dalam jawatan oleh Stefan Judis,
Menggunakan RequestAnimationFrame dengan cangkuk ReactApr 17, 2025 am 11:46 AMAnimasi dengan RequestAnimationFrame semestinya mudah, tetapi jika anda belum membaca dokumentasi React dengan teliti maka anda mungkin akan mengalami beberapa perkara
Perlu tatal ke bahagian atas halaman?Apr 17, 2025 am 11:45 AMMungkin cara paling mudah untuk menawarkan kepada pengguna adalah pautan yang mensasarkan ID pada elemen. Begitu seperti ...
API terbaik (graphql) adalah salah satu yang anda tulisApr 17, 2025 am 11:36 AMDengar, saya bukan pakar GraphQL tetapi saya suka bekerja dengannya. Cara ia mendedahkan data kepada saya sebagai pemaju front-end cukup sejuk. Ia seperti menu
Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruApr 17, 2025 am 11:26 AMPada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s
Pelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanApr 17, 2025 am 11:19 AMSaya baru -baru ini melihat perubahan yang menarik pada Codepen: apabila melayang pena di laman web, ada persegi panjang dengan sudut bulat yang berkembang di belakang.
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
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Dreamweaver Mac版
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
