Changer la couleur de l'espace réservé d'une entrée HTML à l'aide de CSS
P粉068510991
2023-08-27 11:17:26
<p>Chrome v4 prend en charge les attributs d'espace réservé sur l'élément <code>input[type=text]</code> (d'autres peuvent faire de même). </p>
<p>Cependant, le CSS suivant ne fait rien avec la valeur de l'espace réservé : </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">input[placeholder], [placeholder], *[placeholder] {
couleur : rouge !important ;
}</pré>
<pre class="brush:html;toolbar:false;"><input type="text" placeholder="Value"></pre>
<p><br /></p>
La valeur <p><code>value</code> restera <code>gris</code> au lieu de <code>red</code>. </p>
<p><strong>Existe-t-il un moyen de modifier la couleur du texte de l'espace réservé ? </strong></p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
/* do not group these rules */ *::-webkit-input-placeholder { color: red; } *:-moz-placeholder { /* FF 4-18 */ color: red; opacity: 1; } *::-moz-placeholder { /* FF 19+ */ color: red; opacity: 1; } *:-ms-input-placeholder { /* IE 10+ */ color: red; } *::-ms-input-placeholder { /* Microsoft Edge */ color: red; } *::placeholder { /* modern browser */ color: red; }Cela stylisera tous les
input和textareaespaces réservés.Important : Ne regroupez pas ces règles. Au lieu de cela, créez des règles distinctes pour chaque sélecteur (un sélecteur invalide dans un groupe invalide l'ensemble du groupe).
Mise en œuvre
Il existe trois implémentations différentes : pseudo-élément, pseudo-classe et aucune.
::-webkit-input-placeholder. [référence]:-moz-placeholder(a colon). [référence]::-moz-placeholder, mais l'ancien sélecteur fonctionnera encore pendant un certain temps. [Référence]:-ms-input-placeholder. [Référence]::placeholder[Ref]Internet Explorer 9 et versions antérieures ne prennent pas du tout en charge l'attribut
placeholder, tandis que Opera 12 et versions antérieures ne prennent en charge aucun sélecteur CSS d'espace réservé.Les discussions sur les meilleures options de mise en œuvre se poursuivent. Notez que les pseudo-éléments se comportent comme de vrais éléments dans le shadow DOM.
input上的paddingn'obtiendra pas la même couleur d'arrière-plan que le pseudo-élément.Sélecteur CSS
Les agents utilisateurs doivent ignorer les règles avec des sélecteurs inconnus. Voir Sélecteur Niveau 3 :
Nous devons donc établir des règles distinctes pour chaque navigateur. Sinon, l'ensemble du groupe sera ignoré par tous les navigateurs.
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; } ::placeholder { /* Most modern browsers support this now. */ color: #909; }