33 Pregunta: Cambiar el color del marcador de posición de una entrada HTML5 con CSS

pregunta creada en Wed, Jan 31, 2018 12:00 AM

Chrome es compatible con atributo de marcador de posición en los elementos input[type=text] (probablemente otros también lo hagan).

Pero el siguiente CSS no hace nada al valor del marcador de posición:

 
input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value seguirá siendo grey en lugar de red.

¿Hay alguna forma de cambiar el color del texto del marcador de posición?

    
3810
  1. Heads-up rápido (no es una solución, solo un FYI): si recuerdo correctamente, la entrada [placeholder] simplemente coincide con < input > Las etiquetas que tienen un atributo de marcador de posición, no coinciden con el atributo de marcador de posición en sí.
    2010-04-09 19: 58: 34Z
  2. Yah, el pensamiento cruzó mi mente de que esto podría ser como tratar de diseñar el atributo de "título" de un elemento. ¡Así que +1 por pensar igual!
    2010-04-09 20: 01: 09Z
  3. @ MathiasBynens La pseudo-clase: placeholder aparece con un elemento de entrada que muestra dicho texto de marcador de posición. Entonces, coincide con la etiqueta <input>, como Selector input, pero mostrando el texto del marcador de posición en este momento. Tampoco coincide con el atributo de marcador de posición en sí.
    2016-01-18 12: 55: 44Z
  4. @ HEX No es como el selector input porque selecciona todos los elementos input. :placeholder-shown solo selecciona input elementos que muestran actualmente el marcador de posición, lo que le permite aplicar un estilo a esos elementos únicamente y personalizar el texto del marcador de posición. ¿Qué estás tratando de decir?
    2016-01-19 14: 19: 14Z
  5. @ HEX (Por supuesto, también seleccionó textarea elementos que muestran el texto de marcador de posición).
    2016-01-21 10: 18: 26Z
30 Respuestas                              30                         

Implementación

Hay tres implementaciones diferentes: pseudo-elementos, pseudo-clases y nada.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) y Microsoft Edge están utilizando un pseudo-elemento: ::-webkit-input-placeholder. [ Ref ]
  • Mozilla Firefox 4 a 18 está utilizando una pseudo-clase: :-moz-placeholder ( uno dos puntos). [ Ref ]
  • Mozilla Firefox 19+ está utilizando un pseudo-elemento: ::-moz-placeholder, pero el antiguo selector seguirá funcionando por un tiempo. [ Ref ]
  • Internet Explorer 10 y 11 están utilizando una pseudo-clase: :-ms-input-placeholder. [ Ref ]
  • Abril de 2017: La mayoría de los navegadores modernos admiten el pseudo-elemento ::placeholder [ Ref. ]

Internet Explorer 9 y versiones anteriores no admiten el atributo placeholder en absoluto, mientras que Opera 12 and lower no admite ningún selector de CSS para marcadores de posición.

La discusión sobre la mejor implementación aún continúa. Tenga en cuenta que los pseudo-elementos actúan como elementos reales en el Shadow DOM . Un padding en un input no obtendrá el mismo color de fondo que el pseudo-elemento.

selectores de CSS

Los agentes de usuario deben ignorar una regla con un selector desconocido. Consulte Selectores Nivel 3 :

  

un grupo de selectores que contienen un selector no válido no es válido.

Así que necesitamos reglas separadas para cada navegador. De lo contrario, todo el grupo sería ignorado por todos los navegadores.

 
::-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;
}
<input placeholder="Stack Snippets are awesome!">

Notas de uso

  • Tenga cuidado para evitar malos contrastes. El marcador de posición de Firefox parece estar predeterminado con una opacidad reducida, por lo que debe usar opacity: 1 aquí.
  • Tenga en cuenta que el texto del marcador de posición solo se recorta si no se ajusta, dimensione los elementos de entrada en em y pruébelos con una configuración de tamaño de fuente mínima grande. No olvide las traducciones: algunos idiomas necesitan más espacio para el misma palabra
  • Los navegadores con compatibilidad con HTML para placeholder pero sin compatibilidad con CSS para eso (como Opera) también deben probarse.
  • Algunos navegadores usan CSS predeterminado adicional para algunos tipos de input (email, search). Esto podría afectar la representación de formas inesperadas. Utilice las propiedades -webkit-appearance y -moz-appearance para cambiar eso. Ejemplo:
 
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
    
4693
2018-01-07 14: 00: 37Z
  1. También tenga en cuenta que, aunque Webkit considera que esto tiene una especificidad bastante fuerte, Mozilla no. Es probable que tengas que poner algunos importadores allí para que aparezcan cosas.
    2011-09-05 14: 38: 43Z
  2. @ toscho: gracias por la gran respuesta. Solo necesitaba una pequeña demostración de ello "en vivo", por lo que también se puede encontrar su ejemplo aquí: jsfiddle.net/Sk8erPeter /KyVXK . Gracias de nuevo.
    2013-01-27 01: 39: 15Z
  3. El marcador de posición de Firefox parece ser predeterminado con una opacidad reducida. Para cualquier otra persona que tenga dificultades y se pregunte por qué diablos esto no parece estar funcionando ("¿por qué mi texto en blanco sigue siendo gris ..."), use opacidad: 1
    2013-04-03 18: 33: 08Z
  4. En IE10 *:-ms-input-placeholder y :-ms-input-placeholder por sí solo no funciona, pero INPUT:-ms-input-placeholder sí lo hace. Odd.
    2013-12-13 03: 55: 43Z
  5. Nota para Bootstrap 3: la clase "form-control" anula el color debido a la especificidad de CSS (es decir, "form-control :: - webkit-input-placeholder"), por lo que debe ser al menos tan específico o usar "! important" en su CSS. (esto fue un infierno para depurar ya que ni Firebug ni Devtools parecen mostrar esta pseudo clase)
    2014-10-06 22: 42: 36Z

 
/* 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 estilizará a todos los marcadores de posición input y textarea.

Nota importante: No agrupe estas reglas. En su lugar, cree una regla separada para cada selector (un selector no válido en un grupo hace que todo el grupo sea inválido).

    
695
2018-07-19 15: 14: 22Z
  1. El documento de MSDN al que se vinculó, indica que solo se admite en Internet Explorer 10. Sigue siendo un buen hallazgo, pero no es muy útil hasta que la base de usuarios de IE10 se vuelve significativa (es posible que estemos observando un marco de tiempo de años para eso).
    2012-03-14 20: 44: 57Z
  2. De manera realista, querrá aplicar un estilo a los marcadores de posición en todo el sitio, no a cada entrada individual por ID.
    2013-09-10 11: 03: 48Z
  3. Después de FF19 tienes que usar :: - moz-placeholder
    2013-10-06 13: 22: 53Z
  4. Debe colocar este CSS en la parte inferior de su hoja de estilo, si también aplica una clase en la entrada, para que funcione en IE (11). Consulte este enlace en JSFiddle jsfiddle.net/9kkef . Abra la página tanto en IE como en otro navegador, en IE verá que el texto del marcador de posición será del color de la clase aplicada.
    2014-07-02 07: 44: 25Z

También es posible que desee aplicar estilo a las áreas de texto:

 
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}
    
267
2013-07-23 20: 45: 21Z
  1. al imprimir en Chrome no funciona ... cualquier ayuda @media print {input [tipo = texto] .form-control :: - webkit-input-placeholder , ingrese [type = textarea] .form-control :: - webkit-input-placeholder {color: #FFFFFF; }}
    2015-11-11 19: 07: 47Z

Para Bootstrap y Less usuarios, hay un mixin .placeholder:

 
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
    
103
2016-09-24 07: 52: 41Z
  1. O incluso más simple, edite la variable @input-color-placeholder, que generalmente se encuentra en variables.less
    2014-10-08 21: 55: 01Z
  2. @ William, ¿no sería más fácil definir el selector en sí mismo y usar el mixin para evitar tener que retroceder y cambiarlo en caso de que esté buscando hacer otro? marcador de posición de entrada de un color diferente?
    2018-02-18 22: 49: 20Z
  3. @ Brandito, que suena como un caso de borde, generalmente el color del marcador de posición es el mismo para todos los elementos de formulario dentro de un diseño.
    2018-02-20 00: 17: 55Z
  4. @ William Sorry, soy terrible para redactar este tipo de cosas, pensé que sería mejor usar la mezcla con el argumento del color de entrada que deseas aunque honestamente, probablemente estoy pensando en los casos de borde a los que estoy acostumbrado (diseñando el marcador de posición de entrada de búsqueda en un fondo de color: P), lo siento pero tienes razón, disculpas.
    2018-02-20 01: 11: 24Z
  5. @ Brandito Está todo bien. Siempre hay casos de borde.
    2018-02-27 20: 14: 20Z

Además de la respuesta de toscho, he notado algunas inconsistencias de los kits web entre Chrome 9-10 y Safari 5 con las propiedades CSS compatibles que vale la pena mencionar.

Específicamente Chrome 9 y 10 no son compatibles con background-color, border, text-decoration y text-transform cuando se estiliza el marcador de posición.

La comparación completa entre navegadores es aquí .

    
95
2013-09-25 13: 04: 08Z

Para Sass :

 
// 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);
}
    
73
2016-09-24 07: 54: 57Z
  1. Forma más flexible: usar @content;
    2017-05-08 10: 33: 09Z

Esto funcionará bien. DEMO AQUÍ:

 
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;
}
<input type="text" placeholder="Value" />
    
57
2016-09-12 08: 08: 56Z
  1. También tuve que agregar! important en Firefox v56
    2017-10-17 14: 48: 52Z

En Firefox e Internet Explorer, el color de texto de entrada normal anula la propiedad de color de los marcadores de posición. Por lo tanto, necesitamos

 
::-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; 
}
    
46
2016-09-24 07: 48: 14Z

Solución de navegador cruzado:

 
/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Crédito: David Walsh

    
39
2014-01-02 23: 27: 05Z

Utilice el nuevo ::placeholder si usa autoprefixer .

Tenga en cuenta que el .placeholder mixin de Bootstrap está en desuso de esto.

Ejemplo:

 
input::placeholder { color: black; }

Al usar autoprefixer, lo anterior se convertirá al código correcto para todos los navegadores.

    
38
2017-02-13 08: 19: 53Z

Ahora tenemos una forma estándar de aplicar CSS a un marcador de posición de entrada: ::placeholder pseudo-elemento de this Borrador del nivel 4 del módulo CSS.

    
37
2015-08-12 03: 11: 39Z
  1. Esto funciona en Firefox 51. Solo usaré este método; los otros navegadores se pondrán al día lo suficientemente pronto para mí (dado que no se rompe ninguna funcionalidad si no se aplica el estilo de ser estándar).
    2017-02-27 08: 39: 29Z

Acabo de darme cuenta de que Mozilla Firefox 19+ tiene un valor de opacidad para el marcador de posición, por lo que el color no será lo que realmente quieres.

 
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

Sobrescribo el opacity por 1, así que será bueno para ir.

    
34
2016-09-24 07: 56: 21Z

No recuerdo dónde encontré este fragmento de código en Internet (no lo escribí yo, no recuerdo dónde lo encontré ni quién lo escribió).

 
$('[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('');
            }
        })
    });

Simplemente cargue este código JavaScript y luego edite su marcador de posición con CSS llamando a esta regla:

 
form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}
    
33
2016-09-24 07: 50: 27Z
  1. Esta es la forma antigua de hacerlo, que he usado bastante. La desventaja es que el texto del marcador de posición desaparece cuando te enfocas. He encontrado que esto es molesto cuando la interfaz de usuario no incluye etiquetas junto a la entrada. En los últimos meses, comencé a reemplazar este método con el uso de texto de marcador de posición, lo que creo que es una mejora de UX.
    2013-12-10 19: 31: 29Z
  2. El otro problema con el código como este es que el código del lado del servidor tiene que lidiar con el texto del marcador de posición como entrada vacía, que tiene problemas con los casos de borde en los que desea ingresar una ciudad llamada "Pueblo". En lugar de comparar los valores con el texto del marcador de posición, realmente debería utilizar un indicador modificado de datos en la entrada y luego borrar la entrada en el formulario enviado si la bandera no está establecida. Y para las interfaces AJAX, es posible que ni siquiera tenga un formulario, por lo que debería poder asociar un evento de envío arbitrario con la entrada. Esta es una de esas situaciones realmente simples que no lo son.
    2014-03-07 13: 16: 02Z

Creo que este código funcionará porque se necesita un marcador de posición solo para el texto de tipo de entrada. Entonces esta CSS de una línea será suficiente para su necesidad:

 
input[type="text"]::-webkit-input-placeholder {
    color: red;
}
    
32
2016-09-24 07: 57: 58Z
  1. No uses este más. Hay varios elementos más con marcador de posición y más prefijos. Vea las soluciones anteriores o use ::placeholder junto con el autorefixer.
    2018-07-19 15: 21: 16Z

Para los usuarios de Bootstrap , si está utilizando class="form-control", puede Ser un problema de especificidad CSS. Deberías obtener una prioridad más alta:

 
.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

O si está utilizando Menos :

 
.form-control{
    .placeholder(red);
}
    
30
2016-09-24 07: 53: 37Z

Si está utilizando Bootstrap y no pudo hacer que esto funcione entonces es probable que te hayas perdido el hecho de que Bootstrap agrega estos selectores. Estamos hablando de Bootstrap v3.3.

Si está intentando cambiar el marcador de posición dentro de una clase CSS .form-control , entonces debe anularlo de esta manera:

 
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}
    
18
2016-09-24 08: 01: 43Z

¿Qué tal esto?

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

Sin CSS o marcador de posición, pero obtienes la misma funcionalidad.

    
17
2019-05-15 16: 15: 14Z
  1. ¿Qué sucede si alguien vuelve a hacer clic después de escribir algo ... el texto original que escribieron se habrá ido?
    2013-05-02 10: 04: 13Z
  2. @ LuckySoni podría hacer esto, pero personalmente prefiero el primero. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
    2013-05-18 18: 25: 19Z
  3. Incluso su segunda versión no proporciona la misma funcionalidad. Si el usuario envía el<form> con esta entrada, el texto del marcador de posición se enviará al servidor. He visto que muchos sitios hacen esto mal.
    2013-05-30 08: 35: 21Z
  4. ¡Esto es peligroso! ¡Si vuelves de nuevo al formulario, lo perdiste todo!
    2019-05-15 15: 10: 46Z

Este código corto y limpio:

 
::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}
    
16
2017-08-30 18: 18: 11Z

He intentado todas las combinaciones aquí para cambiar el color, en mi plataforma móvil, y finalmente fue:

 
-webkit-text-fill-color: red;

que hizo el truco.

    
14
2016-09-24 07: 58: 47Z
  1. This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill. Me parece que tienes alguna otra regla CSS que establece la propiedad color.
    2015-08-05 10: 25: 49Z

Para usuarios de SASS /SCSS que utilizan Bourbon , tiene una función incorporada.

 
//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Salida CSS, también puedes tomar esta parte y pegarla en tu código.

 
//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}
    
7
2016-10-04 07: 50: 11Z

intente este código para diferentes elementos de entrada, estilos diferentes

 
your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

ejemplo 1:

 
input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

ejemplo 2:

 
input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }
    
7
2017-10-13 06: 47: 35Z

Aquí hay un ejemplo más:

 
.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}
<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>
    
5
2016-05-31 09: 21: 03Z

Agregar una posibilidad real muy agradable y simple: filtros css !

 ingrese la descripción de la imagen aquí

 ingrese la descripción de la imagen aquí

 ingrese la descripción de la imagen aquí

Estilizará todo, incluido el marcador de posición.

Lo siguiente establecerá ambas entradas en la misma paleta, usando el filtro de tono para el cambio de color. Se procesa muy bien ahora en los navegadores (excepto, por ejemplo, ...)

 
input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

Para permitir que los usuarios lo cambien dinámicamente, utilizando un color de tipo de entrada para los cambios, o para encontrar matices, consulte este fragmento de código:

De: https://codepen.io/Nico_KraZhtest/pen/bWExEB

 
function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css filtra documentos: https://developer.mozilla.org /en-US /docs /Web /CSS /filter

    
5
2018-04-11 15: 42: 41Z

OK, los marcadores de posición se comportan de manera diferente en diferentes navegadores, por lo que necesita usar el prefijo del navegador en su CSS para hacerlos idénticos, por ejemplo, Firefox le da una transparencia al marcador de posición de manera predeterminada, por lo que debe agregar la opacidad 1 a su css, más el color , no es una gran preocupación la mayoría de las veces, pero es bueno que sean consistentes:

 
*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}
    
4
2017-05-11 12: 41: 30Z

Puedes cambiar el color del marcador de posición de una entrada HTML5 con CSS. Si por casualidad, su conflicto de CSS, esta nota de código funciona, puede usar (! Importante) como a continuación.

 
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

Espero que esto ayude.

    
3
2017-12-21 08: 10: 43Z

Puede usar esto para entrada y estilo de enfoque:

 
input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
    
2
2018-05-13 15: 19: 23Z

La forma más fácil sería:

 
#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}
    
2
2018-10-27 20: 41: 40Z

Compass tiene una mezcla para esto de manera inmediata.

Toma tu ejemplo:

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

Y en SCSS usando brújula:

 
input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Vea los documentos para la combinación entrada-marcador de posición.

    
1
2016-09-20 12: 37: 05Z

prueba esto te ayudará a que esto funcione en todos tus navegadores de favoritos:

 
::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }
    
0
2017-09-22 17: 27: 51Z

Color del marcador de posición en un elemento específico en diferentes navegadores.

 
HTML

<input class='contact' type="email" placeholder="majed@firefly.com">

CSS 

    .contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: pink;
    }
    .contact::-moz-placeholder { /* Firefox 19+ */
      color: pink;
    }
    .contact:-ms-input-placeholder { /* IE 10+ */
      color: pink;
    }
    .contact:-moz-placeholder { /* Firefox 18- */
      color: pink;
    }
    
0
2018-11-19 04: 49: 19Z
fuente colocada aquí