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 de l'espace réservé d'entrée HTML5. Les amis qui en ont 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 sont not Ne fonctionne pas :

CSS

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

Instruction d'entrée HTML

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

La valeur du résultat en cours d'exécution est toujours grise, Couleur : le 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 utilisent des pseudo-classes

:-moz-placeholder

Mozilla Firefox 19+ Utiliser un pseudo-élément

::-moz-placeholder

IE10 utilise une pseudo-classe

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

brilliout.com : La couleur de la police d'entrée et de Textarea est 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.

*::-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 le attribut de caractère d'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 :

Utiliser PHP et HTML5 FormData pour obtenir un téléchargement de fichiers sans actualisation

HTML5 utilise DOM pour la personnalisation contrôler

Implémentation du canevas HTML5 pour dessiner des rectangles et des triangles simples

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!