Rumah > Artikel > hujung hadapan web > Apakah gaya karet input teks?

Apakah gaya karet input teks?

WBOYke hadapan: 2023-09-11 19:21:03818semak imbas

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 bagi

Contoh 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>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>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>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!

css html auto 字符串

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Ketahui pengetahuan flexbox CSS3, bagaimana untuk mengatur elemen halaman web dengan cepat?Artikel seterusnya：Ketahui pengetahuan flexbox CSS3, bagaimana untuk mengatur elemen halaman web dengan cepat?

Artikel berkaitan

Lihat lagi