Rumah > Artikel > hujung hadapan web > Bagaimana untuk melumpuhkan penonjolan pemilihan teks menggunakan CSS?

Bagaimana untuk melumpuhkan penonjolan pemilihan teks menggunakan CSS?

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

如何使用 CSS 禁用文本选择突出显示？

Dalam CSS, kami boleh menggunakan atribut pilih untuk melumpuhkan penyerlahan pemilihan teks. Tetapi untuk melumpuhkan teks kita perlu menggunakan beberapa sifat dalam CSS supaya teks tidak boleh dipilih atau diserlahkan. Mari kita ambil contoh untuk memahami perbezaan antara teks yang diserlahkan dan yang tidak diserlahkan.

Tutorialspoint - Serlahkan Teks.
Tutorialspoint - Teks tidak diserlahkan.

Atribut yang digunakan

Sifat berikut digunakan dalam contoh -

user-select - Atribut ini mentakrifkan sama ada pengguna memilih elemen teks. Penyemak imbas Chrome dan Opera menyokong harta ini.
moz-user-select - Atribut ini mempunyai kesan yang sama seperti atribut pilihan pengguna dan disokong oleh pelayar Mozilla Firefox.
webkit-text-select - Safari IOS menyokong atribut ini dan sama dengan atribut pilih pengguna.
webkit-user-select - Sifat ini berfungsi sama seperti sifat pilih pengguna. Penyemak imbas Safari menyokong harta ini.

Contoh 1

Dalam contoh ini, kami mula-mula menetapkan tajuk utama teks dan menggunakan elemen h1 dan elemen p untuk menetapkan perenggan teks. Untuk melumpuhkan penyerlahan pemilihan teks pada perenggan, ia menggunakan CSS dalaman untuk mendayakan kelas elemen p, iaitu ".no-highlight". Kelas ini menetapkan nilai dalam sifat penyemak imbas yang dinamakan pengguna-pilih kepada tiada (pemilihan teks dilumpuhkan dalam penyemak imbas Chrome dan Opera).

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      .not-active{
         user-select: none; // chrome and Opera
      }
   </style>
</head>
<body>
   <center>
      <h1>The Story of Helen Keller</h1>
   </center>
   <p class="not-active">Helen Keller (born June 27, 1880, in Tuscumbia, Alabama, U.S.—died June 1, 1968, in Westport, Connecticut) was a blind and deaf American author and schoolteacher. Keller lost her eyes and hearing at the age of 19 months due to illness, and her speech development followed suit. Anne Sullivan (1866-1936), who taught her the names of things by pressing the manual alphabet into her palm, started instructing her five years later. Keller eventually learned to read and write in Braille. She was the author of several works, including The Story of My Life. (1902). William Gibson's play The Miracle Worker depicted her upbringing. (1959; film, 1962).</p>
   <p>
      <b>@tutorialspoint<b>
   </p>
</body>
</html>

Contoh 2

Dalam contoh ini, kami akan mencipta dua perenggan menggunakan elemen p untuk menunjukkan perbezaan antara mendayakan dan melumpuhkan pemilihan teks. Perenggan pertama ialah perwakilan ringkas teks, yang bermaksud teks didayakan, tetapi dalam perenggan kedua ia menetapkan kelas yang dipanggil ".no-highlight". Kemudian gunakan CSS dalaman untuk mendapatkan rujukan ini dan lumpuhkan pemilihan teks dengan menggayakan sifat penyemak imbas yang berbeza.

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
   <style>
      .no-highlight{
         user-select: none; // chrome and Opera
         -moz-user-select: none; // Firefox
         -webkit-text-select: none; // IOS Safari
         -webkit-user-select: none; // Safari
      }
   </style>
</head>
<body>
   <h1>Disable the text selection highlighting using CSS</h1>
   <p>The text can be highlighted</p>
   <p class="no-highlight">The text cannot be highlighted</p>
</body>
</html>

Kesimpulan

Kami memahami konsepnya dengan mendayakan dan melumpuhkan penyerlahan teks. Dalam output di atas, anda dapat melihat bahawa apabila kursor bergerak ke atas teks, teks pertama diserlahkan, manakala dalam perenggan kedua, teks tidak diserlahkan kerana sifat pelayar lumpuhkan yang digunakan dalam CSS dalaman.

Atas ialah kandungan terperinci Bagaimana untuk melumpuhkan penonjolan pemilihan teks menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

firefox css chrome safari webkit select ios

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk mencipta templat bar hendal bara?Artikel seterusnya：Bagaimana untuk mencipta templat bar hendal bara?

Artikel berkaitan

Lihat lagi