Comment modifier la couleur de l'espace réservé avec CSS-tutoriel CSS-php.cn

Comment modifier la couleur de l'espace réservé avec CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:07:57

original

34529 Les gens l'ont consulté

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.

Comment modifier la couleur de l'espace réservé avec CSS

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>

Copier après la connexion

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;
}

Copier après la connexion

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!