Maison > Article > interface Web > Comment désactiver la mise en surbrillance de la sélection de texte à l'aide de CSS ?
Comment désactiver la mise en surbrillance de la sélection de texte à l'aide de CSS ?
- WBOYavant
- 2023-09-19 11:21:09981parcourir
En CSS, nous pouvons utiliser l'attribut select pour désactiver la mise en surbrillance de la sélection de texte. Mais pour désactiver le texte, nous devons appliquer certaines propriétés en CSS afin que le texte ne puisse pas être sélectionné ou mis en surbrillance. Prenons un exemple pour comprendre la différence entre le texte surligné et non surligné.
Tutorialspoint - Surlignage de texte.
Tutorialspoint - Le texte n'est pas mis en surbrillance.
Attributs utilisés
Les propriétés suivantes sont utilisées dans l'exemple -
user-select - Cet attribut définit si l'utilisateur sélectionne l'élément de texte. Les navigateurs Chrome et Opera prennent en charge cette propriété.
moz-user-select - Cet attribut a le même effet que l'attribut user-select et est pris en charge par le navigateur Mozilla Firefox.
webkit-text-select - IOS Safari prend en charge cet attribut et est identique à l'attribut de sélection de l'utilisateur.
webkit-user-select - Cette propriété fonctionne de la même manière que la propriété user-select. Le navigateur Safari prend en charge cette propriété.
Exemple 1
Dans cet exemple, nous définissons d'abord le titre principal du texte et utilisons les éléments h1 et p pour définir les paragraphes du texte. Pour désactiver la mise en surbrillance de la sélection de texte sur un paragraphe, il utilise du CSS interne pour activer la classe de l'élément p, qui est ".no-highlight". Cette classe définit la valeur de la propriété du navigateur nommée user-select sur none (la sélection de texte est désactivée dans les navigateurs Chrome et 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>
Exemple 2
Dans cet exemple, nous allons créer deux paragraphes en utilisant l'élément p pour montrer la différence entre activer et désactiver la sélection de texte. Le premier paragraphe est une simple représentation du texte, ce qui signifie que le texte est activé, mais dans le deuxième paragraphe, il définit une classe appelée ".no-highlight". Utilisez ensuite le CSS interne pour obtenir cette référence et désactivez la sélection de texte en stylisant une propriété de navigateur différente.
<!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>
Conclusion
Nous comprenons son concept en activant et désactivant la surbrillance du texte. Dans la sortie ci-dessus, vous pouvez voir que lorsque le curseur se déplace sur le texte, le premier texte est mis en surbrillance, tandis que dans le deuxième paragraphe, le texte n'est pas mis en surbrillance en raison de la propriété de désactivation du navigateur utilisée dans le CSS interne.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!