Bagaimana untuk menyembunyikan karet dalam halaman web menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menyembunyikan karet dalam halaman web menggunakan CSS?

王林

Lepaskan： 2023-09-05 08:13:02

ke hadapan

802 orang telah melayarinya

如何使用 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;

Salin selepas log masuk

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>

Salin selepas log masuk

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);

Salin selepas log masuk

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>

Salin selepas log masuk

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">

Salin selepas log masuk

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!