Heim > Artikel > Web-Frontend > Wie deaktiviere ich die Hervorhebung der Textauswahl mithilfe von CSS?
Wie deaktiviere ich die Hervorhebung der Textauswahl mithilfe von CSS?
- WBOYnach vorne
- 2023-09-19 11:21:09993Durchsuche
In CSS können wir das Select-Attribut verwenden, um die Hervorhebung der Textauswahl zu deaktivieren. Um den Text jedoch zu deaktivieren, müssen wir einige Eigenschaften in CSS anwenden, damit der Text nicht ausgewählt oder hervorgehoben werden kann. Nehmen wir ein Beispiel, um den Unterschied zwischen hervorgehobenem und nicht hervorgehobenem Text zu verstehen.
Tutorialspoint - Texthervorhebung.
Tutorialspoint – Text wird nicht hervorgehoben.
Verwendete Attribute
Die folgenden Eigenschaften werden im Beispiel verwendet -
user-select – Dieses Attribut definiert, ob der Benutzer das Textelement auswählt. Chrome- und Opera-Browser unterstützen diese Eigenschaft.
moz-user-select – Dieses Attribut hat die gleiche Wirkung wie das user-select-Attribut und wird vom Mozilla Firefox-Browser unterstützt.
webkit-text-select – IOS Safari unterstützt dieses Attribut und ist dasselbe wie das Benutzerauswahlattribut.
webkit-user-select – Diese Eigenschaft funktioniert genauso wie die User-Select-Eigenschaft. Der Safari-Browser unterstützt diese Eigenschaft.
Beispiel 1
In diesem Beispiel legen wir zunächst den Haupttitel des Textes fest und verwenden h1-Elemente und p-Elemente, um die Textabsätze festzulegen. Um die Hervorhebung der Textauswahl in einem Absatz zu deaktivieren, wird internes CSS verwendet, um die Klasse des p-Elements zu aktivieren, die „.no-highlight“ ist. Diese Klasse setzt den Wert in der Browsereigenschaft namens „user-select“ auf „none“ (die Textauswahl ist in den Browsern Chrome und Opera deaktiviert).
<!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>
Beispiel 2
In diesem Beispiel erstellen wir zwei Absätze mit dem p-Element, um den Unterschied zwischen der Aktivierung und Deaktivierung der Textauswahl zu zeigen. Der erste Absatz ist eine einfache Darstellung des Textes, was bedeutet, dass der Text aktiviert ist, aber im zweiten Absatz wird eine Klasse namens ".no-highlight" festgelegt. Verwenden Sie dann internes CSS, um diese Referenz abzurufen und die Textauswahl zu deaktivieren, indem Sie eine andere Browsereigenschaft formatieren.
<!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>
Fazit
Wir verstehen sein Konzept, indem wir die Texthervorhebung aktivieren und deaktivieren. In der obigen Ausgabe können Sie sehen, dass der erste Text hervorgehoben wird, wenn sich der Cursor über den Text bewegt, während der Text im zweiten Absatz aufgrund der im internen CSS verwendeten Eigenschaft „Browser deaktivieren“ nicht hervorgehoben wird.
Das obige ist der detaillierte Inhalt vonWie deaktiviere ich die Hervorhebung der Textauswahl mithilfe von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!