Chrome v4 admite la atributo de marcador de posición en input[type=text] elementos (otros probablemente también).
Sin embargo, el siguiente CSS no hace nada con el valor del marcador de posición:
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}<input type="text" placeholder="Value">Value todavía permanecerá grey en lugar de red.
¿Hay alguna manera de cambiar el color del texto del marcador de posición?
/* 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;
}<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>Esto le dará estilo a todos input y textarea marcadores de posición
Nota IMPORTANTE: No agrupe estas reglas. En su lugar, crea una regla separada para cada selector (un selector no válido en un grupo hace que todo el grupo no sea válido).
EIIPII
Para Oreja y Menos usuarios, hay un mixin .placeholder:
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
-
Para cambiar Bootstrap CSS
– la mitad de un vidriero
16 de diciembre de 2020 a las 12:10
Además de la respuesta de toscho, noté algunas inconsistencias de webkit entre Chrome 9-10 y Safari 5 con las propiedades de CSS admitidas que vale la pena señalar.
Específicamente Chrome 9 y 10 no son compatibles background-color, border, text-decoration y text-transform al diseñar el marcador de posición.
La comparación completa entre navegadores es aquí.
-
Para cambiar Bootstrap CSS
– la mitad de un vidriero
16 de diciembre de 2020 a las 12:10
Para Hablar con descaro a usuarios:
// Create placeholder mixin
@mixin placeholder($color, $size:"") {
&::-webkit-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&::-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-ms-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
}
// Use placeholder mixin (the size parameter is optional)
[placeholder] {
@include placeholder(red, 10px);
}
Aviso rápido (no es una solución, solo un FYI): si no recuerdo mal, ingrese[placeholder] solo coincide con las etiquetas que tienen un atributo de marcador de posición, no coincide con el atributo de marcador de posición en sí.
– rosa gótico
9 de abril de 2010 a las 19:58
@MathiasBynens La pseudoclase :placeholder-shown coincide con un elemento de entrada que muestra dicho texto de marcador de posición. Entonces coincide
<input>etiqueta, comoinputselector, pero mostrando texto de marcador de posición en este momento. Tampoco coincide con el atributo de marcador de posición en sí.– HEXAGONAL
18 de enero de 2016 a las 12:55
@HEX No es como el
inputselector porque eso selecciona todoinputelementos.:placeholder-shownsolo seleccionainputelementos que actualmente muestran el marcador de posición, lo que le permite aplicar estilo solo a esos elementos y aplicar estilo de forma eficaz al texto del marcador de posición. ¿Qué estás tratando de decir?– Mathias Bynens
19 de enero de 2016 a las 14:19
@HEX (Por supuesto, también seleccionó
textareaelementos que muestran texto de marcador de posición).– Mathias Bynens
21 de enero de 2016 a las 10:18
No veo ningún problema aquí… El color del texto del marcador de posición ahora es rojo. Tal vez otros navegadores modernos ahora lo admitan.
– Lloyd Dominic
24 de mayo de 2017 a las 5:28