Maison  >  Article  >  interface Web  >  Comment obtenir l'absence de curseur dans la zone de texte en CSS

Comment obtenir l'absence de curseur dans la zone de texte en CSS

WBOY
WBOYoriginal
2021-11-24 10:47:532118parcourir

Méthode : 1. Ajoutez le style "color:transparent;" à l'élément de zone de texte pour rendre le texte et le curseur dans la zone de texte transparents. 2. Ajoutez "text-shadow:h-shadow v-shadow Blur Color ;" à l'élément de zone de texte Stylisez-le simplement pour que le texte soit affiché.

Comment obtenir l'absence de curseur dans la zone de texte en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Comment réaliser une zone de texte sans curseur en CSS

Pour réaliser une zone de texte sans curseur, nous avons besoin de deux étapes. Tout d'abord, nous devons définir la couleur du texte dans la zone de texte. du curseur suit le texte, donc définissez Si le texte est transparent, le curseur dans la zone de texte sera également transparent et invisible.

Notre objectif ne peut pas être atteint pour le moment, car nous ne pouvons pas voir le texte. Pour le moment, il nous suffit de définir l'attribut text-shadow pour que le texte de la zone de texte l'affiche.

La syntaxe de cet attribut est :

text-shadow: h-shadow v-shadow blur color;

Comment obtenir labsence de curseur dans la zone de texte en CSS

Regardons l'application de cette méthode à travers un exemple. L'exemple est le suivant :

<!DOCTYPE html>
<html>
<style>
  input{
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
</style>
<body>
name:
<input type="text">
</body>
</html>

Quand aucun style n'est ajouté à la zone de texte, le curseur est comme suit :

Comment obtenir labsence de curseur dans la zone de texte en CSS

Quand Après avoir ajouté un style à la zone de texte, le résultat de sortie est le suivant :

Comment obtenir labsence de curseur dans la zone de texte en CSS

Comme ci-dessus, il n'y a pas de curseur dans la zone de texte.

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn