Maison >interface Web >tutoriel CSS >Comment modifier la couleur de l'espace réservé avec CSS
Comment modifier la couleur de l'espace réservé avec CSS
- 醉折花枝作酒筹original
- 2021-04-13 10:43:1234503parcourir
Méthode : utilisez d'abord le sélecteur "::placeholder" pour sélectionner l'élément qui doit être modifié ; puis ajoutez le style "color:color value;" Notez que l'espace réservé est un nouveau sélecteur en CSS3 et nécessite différents préfixes ("-ms-", "-webkit-", etc.) dans différents navigateurs.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
L'attribut placeholder est un nouvel attribut en HTML5. Sa fonction est de décrire les informations d'invite de la valeur attendue du champ de saisie
Comment modifier la couleur de l'espace réservé ?
Mais il y a certains problèmes de compatibilité du navigateur, prenons chorme comme exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
input::-webkit-input-placeholder {
color: #aab2bd;
font-size: 12px;
}
input {//边框效果
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入">
</body>
</html>Le sélecteur correspondant au navigateur chorme est input::-webkit-input-placeholder
L'effet est le suivant :
Les sélecteurs pour les autres navigateurs sont les suivants :
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color : red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color : red;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color : red;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color : red;
}
input::-ms-input-placeholder { /* Microsoft Edge */
color : red;
}- Les navigateurs WebKit, Blink, Edge, etc. doivent être préfixés par -webkit-, et c'est un double deux-points. Lors de l'écriture, vous devez également inclure l'entrée
- Pour le navigateur Firefox, il existe deux façons de l'écrire, qui doivent toutes deux être préfixées par -moz-. Les versions inférieures de Firefox utilisent des deux-points (:), tandis que les versions supérieures utilisent des doubles deux-points (::) ; Firefox ne nécessite aucune saisie.
- L'attribut placeholder n'est pris en charge que dans IE10+ et IE11 sont écrits avec le préfixe -ms-, en utilisant deux points (:), et doivent apporter une entrée
Apprentissage recommandé : 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!