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é.
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;
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 :
Quand Après avoir ajouté un style à la zone de texte, le résultat de sortie est le suivant :
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
