À propos de la modification de la couleur de l'espace réservé d'entrée HTML5

Cet article présente principalement les connaissances sur la modification de la couleur des espaces réservés d'entrée HTML5. Les amis dans le besoin peuvent s'y référer. Chrome prend en charge l'attribut de texte d'espace réservé input=[type=text], mais les styles CSS suivants ne fonctionnent pas :

CSS

input[placeholder], [placeholder], *[placeholder] { 
color:red !important; 
}

Instruction d'entrée HTML

<input type="text" placeholder="Value" />

La valeur du résultat de l'opération est toujours grise, Couleur : rouge n'a aucun effet. Existe-t-il un moyen de changer la couleur du texte de l'espace réservé ? J'ai installé le plugin de texte d'espace réservé jQuery dans mon navigateur, mais cela ne fonctionne toujours pas. (!important n'est reconnu que par IE7 et Firefox)

Réponse :

toscho : Il existe trois méthodes d'implémentation : les pseudo-éléments, les pseudo-classes et Notihing.
WebKit et Blink (Safari, Google Chrome, Opera15+) utilisent des pseudo-éléments

::-webkit-input-placeholder

Mozilla Firefox 4-18 utilise des pseudo-classes

:-moz-placeholder

Mozilla Firefox 19+ utilise pseudo-éléments

::-moz-placeholder

IE10 utilise des pseudo-classes

:-ms-input-placeholder

Les sélecteurs CSS dans les versions inférieures à IE9 et Opera12 ne prennent pas en charge le texte d'espace réservé. Il est à noter que les pseudo-éléments joueront le véritable rôle des éléments dans Shadow DOM.

Sélecteur CSS

Étant donné que le sélecteur CSS de chaque navigateur est différent, des paramètres distincts doivent être définis pour chaque navigateur.

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #999; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #999; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #999; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #999; 
}

Matt : Le code pour le style textareas (zone de texte extensible) est le suivant :

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #636363; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #636363; 
}

brrillout.com : Les couleurs de police d'entrée et de Textarea sont toutes deux rouge. Tous les styles doivent être spécifiques aux différents sélecteurs. Ne les regroupez pas dans leur ensemble, car si l'un d'eux échoue, les autres échoueront.

*::-webkit-input-placeholder { 
color: red; 
} 
*:-moz-placeholder { 
color: red; 
} 
*:-ms-input-placeholder { 
/* IE10+ */ 
color: red; 
}

James Donnelly : Dans Firefox et IE, comment remplacer la couleur de l'espace réservé par la couleur normale du texte de saisie :

::-webkit-input-placeholder { 
color: red; text-overflow: ellipsis; 
} 
:-moz-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
} 
::-moz-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
} /* for the future */ 
:-ms-input-placeholder { 
color: #acacac !important; text-overflow: ellipsis; 
}

Il existe un autre bon moyen :

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
color: #666; 
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
color: #666; 
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
color: #666; 
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
color: #666; 
}

Le dernier a été trouvé en ligne :

$('[placeholder]').focus(function() { 
var input = $(this); 
if (input.val() == input.attr('placeholder')) { 
input.val(''); 
input.removeClass('placeholder'); 
} 
}).blur(function() { 
var input = $(this); 
if (input.val() == '' || input.val() == input.attr('placeholder')) { 
input.addClass('placeholder'); 
input.val(input.attr('placeholder')); 
} 
}).blur(); 
$('[placeholder]').parents('form').submit(function() { 
$(this).find('[placeholder]').each(function() { 
var input = $(this); 
if (input.val() == input.attr('placeholder')) { 
input.val(''); 
} 
}) 
});

La règle pour appeler ce code est de charger d'abord Javascript, puis d'utiliser CSS pour modifier les attributs de l'espace réservé.

form .placeholder { 
color: #222; 
font-size: 25px; 
/* etc */ 
}

user1729061 : Vous pouvez obtenir le même effet sans utiliser de CSS ni de texte d'espace réservé.

input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
this.value='';" style="color: #f00;"/>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse des attributs HTML5 modifiables

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!