hujung hadapan web
tutorial css
Bagaimana untuk menyembunyikan karet dalam halaman web menggunakan CSS?
Bagaimana untuk menyembunyikan karet dalam halaman web menggunakan CSS?
Karet, juga dikenali sebagai kursor teks, bertindak sebagai penunjuk yang muncul pada skrin dan menunjukkan tempat input teks bermula. Ini membantu pengguna melihat tempat dia menambah teks. Terdapat banyak antara muka pengguna yang mewakili karet, seperti garis menegak nipis atau kotak berkelip, dan ia berbeza antara penyemak imbas dan antara muka.
Dalam artikel ini, kita akan melihat bagaimana untuk menyembunyikan karet dalam halaman web menggunakan CSS?
Bagaimana untuk menyembunyikan karet?
Insert Karet ialah garis menegak berkelip yang mungkin anda lihat dalam medan input yang menunjukkan tempat teks mesti dimasukkan. Untuk menyembunyikan karet dalam medan input pada halaman web, sifat warna karet digunakan dalam CSS. Biasanya terdapat 3 nilai yang digunakan dengan sifat seperti nilai auto, warna dan ketelusan. Mari lihat sintaks untuk warna karet.
caret-color: transparent;
Mari kita lihat contoh untuk memahami hartanah ini dengan lebih baik.
Contoh
Dalam contoh ini, kami akan menggunakan atribut warna karet dan menetapkan nilainya kepada lutsinar untuk menyembunyikan kursor pada halaman web. Mari kita lihat kod untuk pemahaman yang lebih baik.
<!DOCTYPE html>
<html lang="en">
<head>
<title>An Example of hiding the caret</title>
<style>
.hide {
caret-color: transparent;
}
body {
text-align: center;
}
</style>
</head>
<body>
<p>Once you click in the textbox below the cursor is visible.</p>
<input type="text"><br><br>
<p>In this next text box we made the cursor <b>transparent</b>.</p>
<input type="text" class="hide">
</body>
</html>
Apabila melaksanakan kod di atas, anda dapat melihat bahawa kami telah mencipta 2 medan input. Kemudian, gunakan sifat warna karet dalam medan kedua dan tetapkannya kepada lutsinar. Jadi apabila pengguna mengklik pada medan pertama dia akan dapat melihat karet tetapi dalam medan input kedua pengguna tidak akan dapat melihat karet.
atribut-warna karet
Sifat warna karet akan menetapkan warna garisan berkelip menegak, juga dikenali sebagai karet kerana ia sering muncul dalam medan input. Warna karet juga boleh ditukar, dan sifat warna karet boleh menggunakan nilai yang berbeza, kebanyakannya adalah automatik, telus dan sebarang warna.
Pelayar yang berbeza menggunakan karet yang berbeza Contohnya, karet navigasi boleh dialihkan dengan bebas, tetapi tidak boleh diedit. Contoh penggunaan atribut warna karet boleh jadi
caret-color:rgba(0,0,0,0);
Warna garis menegak atau karet boleh ditetapkan kepada mana-mana warna dalam palet rbga.
Mari lihat contoh lain supaya kita dapat memahami cara menggunakan sifat warna karet untuk menetapkan karet kepada lutsinar, sekali gus menjadikannya hilang.
Contoh
Dalam contoh ini, kita akan mencipta 2 medan input sekali lagi, untuk medan input pertama kita akan menggunakan atribut warna karet dan menetapkan nilainya kepada merah, yang bermaksud sekarang warna karet akan menjadi merah, kita akan lihat warna merah apabila ia berkelip, dan dalam medan input kedua kami akan menggunakan sifat warna karet dan menetapkan nilainya kepada telus, yang akan menyembunyikan karet walaupun apabila medan teks diklik. Mari lihat kodnya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of the hiding the insertion caret</title>
<style>
.cursor {
caret-color: transparent;
}
body {
text-align: center;
}
.clr{
caret-color: red;
}
</style>
</head>
<body>
<p>Following textbox have colored insertion caret.</p>
<input type="text" class="clr"><br><br>
<p>Here we are trying to hide the insersion caret.</p>
<input type="text" class="cursor">
</body>
</html>
Dalam kod di atas, anda dapat melihat bahawa kami memberikan dua medan input 2 kelas untuk pemahaman dan pembezaan yang mudah. Kami menggunakan sifat warna karet dalam bahagian gaya untuk menyembunyikan karet dan menetapkan warna karet.
Anda boleh lihat dalam output di atas bahawa kami mempunyai "Kursor Merah" dan "Sembunyikan Kursor Input" yang akan berfungsi apabila pengguna mengklik pada medan input.
Kita boleh lihat elemen karet
Kita dapat melihat karet −
dalam elemen berikut<input type="text"> <input type="password"> <input type="search"> <input type="date"> <input type="time"> <input type="datetime-local"> <input type="number"> <input type="range"> <input type="email"> <input type="tel"> <input type="url">
KESIMPULAN
Penyemak imbas dan antara muka pengguna yang berbeza mewakili watak karet dengan cara yang berbeza, tetapi kebanyakannya mempunyai kilat garis menegak nipis, juga dikenali sebagai teks karet, yang menunjukkan kepada pengguna tempat untuk mula menaip teks. Karet paling biasa ditemui dalam elemen input dan elemen kawasan teks. Kita boleh mengedit karet menggunakan sifat warna karet Nilai yang tersedia adalah warna, automatik dan telus.
Dalam artikel ini, kami mempelajari cara menggunakan atribut warna karet untuk menyembunyikan karet dalam halaman web.
Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan karet dalam halaman web menggunakan CSS?. 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
1382
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.
Membuat Bragdoc anda sendiri dengan sebelas
Mar 18, 2025 am 11:23 AM
Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.
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.
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.
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
