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

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

王林

Libérer： 2023-09-05 08:13:02

avant

801 Les gens l'ont consulté

如何使用 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;

Copier après la connexion

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>

Copier après la connexion

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);

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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!