Le contenu de cet article est une introduction à la méthode de modification du style d'espace réservé avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Les utilisateurs du projet rencontrent souvent le besoin de modifier la couleur de l'espace réservé de l'entrée. Voici un aperçu de la façon de définir l'espace réservé avec CSS :
Tout d'abord, jetons un coup d'œil à l'espace réservé. style de saisie par défaut de chrome
<input>
(espace réservé)
(style de saisie)
se trouve dans placeholder
et input
Les couleurs par défaut sont un peu différentes. Modifions maintenant la couleur de input
<input>
(espace réservé)
(entrée)
Il n'est pas difficile de constater que l'attribut color
ne peut changer que la couleur de la valeur d'entrée, et la couleur de placeholder
ne change pas du tout. Alors, comment changer la couleur de placeholder
.
Pour changer la couleur de placeholder
vous devez utiliser la pseudo classe ::placeholder
<input>
(placeholder)
( input)
Ce qu'il faut noter, c'est la compatibilité de la pseudo-classe ::palceholder
Ce qui précède est le résultat de l'exécution dans le navigateur Chrome. le code ressemble à ceci dans IE11
(espace réservé - ie11)
(entrée - ie11)
Solution IE :
Tout d'abord, IE9 et versions antérieures ne prennent pas en charge les espaces réservés. IE10 doit utiliser :-ms-input-placeholder
et l'attribut doit ajouter !important
pour augmenter la priorité.
<input>
(espace réservé ie11)
(entrée ie11)
est donné après Solutions d'adaptation pour d'autres navigateurs
/* - Chrome ≤56, - Safari 5-10.0 - iOS Safari 4.2-10.2 - Opera 15-43 - Opera Mobile >12 - Android Browser 2.1-4.4.4 - Samsung Internet - UC Browser for Android - QQ Browser */ ::-webkit-input-placeholder { color: #ccc; font-weight: 400; } /* Firefox 4-18 */ :-moz-placeholder { color: #ccc; font-weight: 400; } /* Firefox 19-50 */ ::-moz-placeholder { color: #ccc; font-weight: 400; } /* - Internet Explorer 10–11 - Internet Explorer Mobile 10-11 */ :-ms-input-placeholder { color: #ccc !important; font-weight: 400 !important; } /* Edge (also supports ::-webkit-input-placeholder) */ ::-ms-input-placeholder { color: #ccc; font-weight: 400; } /* CSS Working Draft */ ::placeholder { color: #ccc; font-weight: 400; }
Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun.
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!