Comment utiliser CSS pour masquer l'exemple de code du curseur d'entrée_CSS tutoriel_CSS_Production de pages Web

Cet article vous présente principalement des informations pertinentes sur la façon d'utiliser CSS pour masquer le curseur de saisie. C'est une exigence que j'ai rencontrée récemment au travail. Bien que cela semble déraisonnable, il existe une solution si nécessaire. Un exemple de code CSS est présenté de manière très détaillée. Les amis intéressés par CSS et ceux qui en ont besoin peuvent s'y référer. Apprenons avec l'éditeur.

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

Rechercher sur Internet de plusieurs manières. : utilisez p pour simuler, définir en lecture seule, définir désactivé, définir le flou automatique, etc., mais j'ai constaté qu'aucun d'entre eux ne pouvait répondre aux besoins. Enfin, 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 sur transparent et le curseur disparaît~

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

Afficher le texte

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

Définir sur le texte de saisie -shadow, le texte est transparent mais on peut utiliser l'ombre du texte pour remplacer la couleur du texte, ce qui est une solution parfaite.

text-shadowattribut

Syntaxe :

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

Description :

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

Résumé

Ce qui précède est tout le contenu de cet article, j'espère qu'il pourra être utile à tout le monde ! !

Recommandations associées :

Méthodes complètes de personnalisation de l'omission de texte à l'aide de CSS pur

Css pour obtenir une disposition horizontale et un effet de défilement des images

Css et js pour implémenter un didacticiel d'interface de centrage de connexion contextuelle

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!