Masquer le curseur de saisie avec CSS

Cette fois, je vais vous présenter les précautions concernant l'utilisation de CSS pour masquer le curseur de saisie et le masquage du curseur de saisie à l'aide de CSS. Ce qui suit est un cas pratique, jetons un coup d'œil. .

Préface

Récemment, l'interface utilisateur de l'entreprise est soudainement venue vers moi et m'a posé une question : "Comment modifier l'entrée sans affecter le fonctionnement " Le curseur est masqué ? "

Je crois que beaucoup de gens seront comme moi et penseront que c'est une exigence de conneries. N'est-ce pas anti-humain de ne pas avoir le curseur dans la zone de saisie ? C'est dommage que nous ne soyons que de petits codeurs, nous n'avons pas le droit de réfuter et ne pouvons l'accepter qu'en silence...

Recherché en ligne de nombreuses façons : utiliser p simulation, définir en lecture seule, définir désactivé , définir le flou automatique et d'autres méthodes, mais j'ai constaté qu'aucune d'entre elles ne pouvait répondre aux besoins. Finalement, j'ai trouvé une solution parfaite fournie par un maître.

La méthode est la suivante :

Masquer d'abord le curseur

  <style>
    input{
      color: transparent;
    }
  </style>

Parce que le curseur suit le texte, nous définissons la couleur du texte à transparent. Le curseur a disparu ~

Mais voici le problème, à quoi sert la zone de saisie lorsque le texte est transparent ? Ne vous inquiétez pas, veuillez regarder vers le bas ~

Afficher le texte

  <style>
    input{
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>

Définir l'ombre du texte sur l'entrée Le texte est transparent mais nous pouvons utiliser l'ombre du texte pour remplacer le texte. La couleur, c'est la solution parfaite.

text-shadowattribut

Syntaxe :

text-shadow:x-offset y-offset blur color;

Explication :

x-offset : (ombre horizontale) représente la distance de décalage horizontal de l'ombre, l'unité peut être px, em ou pourcentage , etc. Si la valeur est positive, l'ombre est décalée vers la droite ; si la valeur est négative, l'ombre est décalée vers la gauche

y-offset : (ombre verticale) représente la distance de décalage vertical de l'ombre ; , l'unité peut être px , em ou pourcentage, etc. Si la valeur est positive, l'ombre est décalée vers le bas ; si la valeur est négative, l'ombre est décalée vers le haut ;

flou : (distance du flou) indique le degré de flou de l'ombre, l'unité peut être px ; , em ou pourcentage, etc. La valeur du flou ne peut pas être négative. Si la valeur est plus grande, l'ombre est plus floue ; si la valeur est plus petite, l'ombre est plus claire. Bien sûr, si vous n'avez pas besoin de l'effet de flou d'ombre, vous pouvez définir la valeur de flou sur 0

couleur : (la couleur de l'ombre) représente la couleur de l'ombre

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Séquence d'animation pour CSS3

Modèle et normes CSS Weird Box Comment utiliser le modèle de boîte

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!