Exemple de modification de couleur d'espace réservé d'entrée HTML5_compétences du didacticiel html5

Chrome prend en charge l'attribut de texte d'espace réservé input=[type=text], mais les styles CSS suivants ne fonctionnent pas :

CSS

Copier le code

Le code est le suivant :

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

Instruction de saisie HTML

Copier le code

Le code est le suivant :

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

La valeur du résultat en cours d'exécution 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

Copier le code

Le code est tel suit :

::-webkit-input-placeholder

Mozilla Firefox 4-18 utilise la pseudo-classe

Copiez le code

Le code est le suivant :

:-moz-placeholder

Mozilla Firefox 19 utilise pseudo-élément

Copier le code

Le code est le suivant :

::- moz-placeholder

IE10 utilise la pseudo-classe

Copiez le code

Le code est comme suit :

:-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.

Copier le code

Le code est le suivant :

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


Matt : Le code du style des zones de texte (zone de texte extensible) est le suivant :

Copier le codeLe code est le suivant :

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

couleur : # 636363 ;
}
entrée :-moz-placeholder, textarea :-moz-placeholder {
couleur : #636363
}


brilliout .com : entrée et La couleur de la police de Textarea est entièrement rouge. Tous les styles doivent être spécifiques aux différents sélecteurs et ne doivent pas être regroupés dans leur ensemble, car si l'un d'eux échoue, les autres échoueront.

Copier le codeLe code est le suivant :

*::-webkit- input-placeholder {

couleur : rouge
}
*:-moz-placeholder {
couleur : rouge
}
*:-ms-input-placeholder {
/* IE10 */
couleur : rouge
}


James Donnelly : Dans Firefox et IE, la couleur normale du texte saisi remplace la couleur de l'espace réservé :

Copier le codeLe code est le suivant :

::-webkit-input-placeholder {

couleur : rouge ; débordement de texte : points de suspension
}
:-moz-placeholder {
couleur : #acacac !important; débordement de texte : points de suspension ; -placeholder {
color: #acacac !important; text-overflow: ellipsis;
} /* pour le futur */
:-ms-input-placeholder {
color: #acacac !important ; texte- débordement : points de suspension
}


Il existe un autre bon moyen :

Copiez le code

Le code est le suivant :

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

Le dernier a été trouvé en ligne :

Copier le code

Le code est le suivant :

$('[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é.

Copier le codeLe code est le suivant :

form .placeholder {

color : #222 ;
font-size : 25px ;
/* etc */
}


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

Copier le codeLe code est le suivant :

input type="text" value=" texte d'espace réservé" onfocus="this.style.color='#000';

this.value='';" style="color: #f00;"/>