Comment masquer le curseur dans une page Web en utilisant CSS ?-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Comment masquer le curseur dans une page Web en utilisant CSS ?

王林

Sep 05, 2023 am 08:13 AM

如何使用 CSS 隐藏网页中的插入符号？

Le curseur est également connu sous le nom de curseur de texte, il agit comme un indicateur affiché à l'écran et indique la position de départ de la saisie de texte. Cela aide l'utilisateur à voir où il ajoute du texte. Il existe de nombreuses interfaces utilisateur qui représentent le curseur, comme une fine ligne verticale ou une boîte clignotante, et cela varie selon les navigateurs et les interfaces.

Dans cet article, nous verrons comment masquer le curseur dans les pages Web en utilisant CSS ?

Comment masquer le curseur ?

Insérer Le curseur est la ligne verticale clignotante que vous pouvez voir dans un champ de saisie et qui indique où le texte doit être inséré. Pour masquer le curseur dans un champ de saisie sur une page Web, la propriété caret color est utilisée en CSS. Habituellement, 3 valeurs sont utilisées avec la propriété comme la valeur auto, couleur et transparence. Examinons la syntaxe de la couleur du signe d'insertion.

caret-color: transparent;

Voyons un exemple pour mieux comprendre cette propriété.

Exemple

Dans cet exemple, nous utiliserons l'attribut caret-color et définirons sa valeur sur transparent pour masquer le curseur sur la page Web. Jetons un coup d'œil au code pour une meilleure compréhension.

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

Lors de l'exécution du code ci-dessus, vous pouvez voir que nous avons créé 2 champs de saisie. Ensuite, utilisez la propriété de couleur caret dans le deuxième champ et définissez-la sur transparent. Ainsi, lorsque l'utilisateur clique sur le premier champ, il pourra voir le curseur mais dans le deuxième champ de saisie, l'utilisateur ne pourra pas voir le curseur.

attribut caret-color

La propriété caret color définira la couleur de la ligne verticale clignotante, également connue sous le nom de caret car elle apparaît souvent dans les champs de saisie. La couleur du curseur peut également être modifiée et la propriété de couleur du curseur peut utiliser différentes valeurs, dont la plupart sont automatiques, transparentes et de n'importe quelle couleur.

Différents navigateurs utilisent des curseurs différents. Par exemple, le curseur de navigation peut être déplacé librement, mais ne peut pas être modifié. Un exemple d'utilisation de l'attribut de couleur caret pourrait être

caret-color:rgba(0,0,0,0);

La couleur de la ligne verticale ou du curseur peut être définie sur n'importe quelle couleur de la palette rbga.

Regardons un autre exemple pour comprendre comment utiliser la propriété caret-color pour définir le curseur sur transparent afin qu'il disparaisse.

Exemple

Dans cet exemple, nous allons créer à nouveau 2 champs de saisie, pour le premier champ de saisie, nous utiliserons la propriété caret-color et définirons sa valeur sur rouge, ce qui signifie que maintenant la couleur du caret sera rouge lorsqu'il clignotera, nous le ferons voir la couleur rouge, et dans le deuxième champ de saisie, nous utiliserons la propriété caret-color et définirons sa valeur sur transparent, ce qui masquera le caret même lorsque vous cliquerez sur le champ de texte. Regardons le code.

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

Dans le code ci-dessus, vous pouvez voir que nous avons attribué 2 classes aux deux champs de saisie pour faciliter la compréhension et la différenciation. Nous avons utilisé la propriété caret-color dans la section style pour masquer le curseur et définir sa couleur.

Vous pouvez voir dans la sortie ci-dessus que nous avons "Curseur rouge" et "Masquer le curseur d'entrée" qui fonctionneront lorsque l'utilisateur clique sur le champ de saisie.

Nous pouvons voir l'élément caret

On peut voir le caret −

dans les éléments suivants

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

Conclusion

Différents navigateurs et interfaces utilisateur représentent le caractère caret de différentes manières, mais la plupart ont une fine ligne verticale, également appelée texte caret, qui indique à l'utilisateur où commencer à taper du texte. Le curseur se trouve le plus souvent dans les éléments d'entrée et les éléments de zone de texte. Nous pouvons modifier le curseur en utilisant la propriété caret color. Les valeurs disponibles sont color, automatique et transparente.

Dans cet article, nous avons appris à utiliser la propriété caret color pour masquer le caret dans une page Web.

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!

Déclaration

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article connexe

Draggin & # 039; et droppin & # 039; en réactionApr 17, 2025 am 11:52 AM

L'écosystème React nous offre de nombreuses bibliothèques qui se concentrent sur l'interaction de la glisser et de la chute. Nous avons react-dnd, react-beeufuly-dnd,

Logiciel rapideApr 17, 2025 am 11:49 AM

Il y a eu des choses merveilleusement interconnectées à propos des logiciels rapides ces derniers temps.

Gradients imbriqués avec un clip de fondApr 17, 2025 am 11:47 AM

Je ne peux pas dire que j'utilise souvent le clip de fond. Je ne parierai presque presque jamais dans le travail CSS au jour le jour. Mais je me suis souvenu de cela dans un post de Stefan Judis,

Utilisation de la réalisation de demandes avec des crochets ReactApr 17, 2025 am 11:46 AM

L'animation avec des demandes de châssis devrait être facile, mais si vous n'avez pas lu de manière approfondie de la documentation de React, vous rencontrerez probablement quelques choses

Besoin de faire défiler en haut de la page?Apr 17, 2025 am 11:45 AM

Peut-être le moyen le plus simple d'offrir cela à l'utilisateur est un lien qui cible un ID sur l'élément. Tellement comme ...

La meilleure API (GraphQL) est celle que vous écrivezApr 17, 2025 am 11:36 AM

Écoutez, je ne suis pas un expert GraphQL mais j'aime travailler avec. La façon dont elle expose les données en tant que développeur frontal est assez cool. C'est comme un menu de

Actualités de plate-forme hebdomadaire: bookmarklet d'espacement de texte, attente de haut niveau, nouvel indicateur de chargement d'ampliApr 17, 2025 am 11:26 AM

Au cours de cette semaine, un Bookmarklet pratique pour inspecter la typographie, en utilisant Await pour bricoler comment les modules JavaScript s'importent, ainsi que Facebook & # 039; S

Diverses méthodes pour étendre une boîte tout en préservant le rayon de la frontièreApr 17, 2025 am 11:19 AM

J'ai récemment remarqué un changement intéressant sur Codepen: sur le plan des stylos sur la page d'accueil, il y a un rectangle avec des coins arrondis se développant dans le dos.

See all articles