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

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

Pero lo siguiente CSSno hace nada al valor del marcador de posición:

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

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

Valueseguirá siendo en greylugar de red.

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

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 pseudoclase: :-moz-placeholder( un colon). ^{[ Ref ]}
• Mozilla Firefox 19+ está utilizando un pseudo-elemento: ::-moz-placeholderpero el selector anterior seguirá funcionando durante 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 simple ::placeholder ^{[ Ref ]}

Internet Explorer 9 y versiones anteriores no admiten el placeholderatributo en absoluto, mientras que Opera 12 y versiones inferiores no admiten ningún selector CSS para marcadores de posición.

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

Selectores CSS

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

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

Por lo tanto, 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 usarse opacity: 1aquí.
• Tenga en cuenta que el texto del marcador de posición solo se corta si no encaja: dimensione sus elementos de entrada emy pruébelos con una configuración de tamaño de fuente mínimo grande. No olvide las traducciones: algunos idiomas necesitan más espacio para la misma palabra.
• placeholderTambién se deben probar los navegadores con soporte HTML pero sin soporte CSS para eso (como Opera).
• Algunos navegadores usan CSS predeterminado adicional para algunos inputtipos ( email, search). Estos pueden afectar la representación de formas inesperadas. Usa las propiedades -webkit-appearance y -moz-appearancepara cambiar eso. Ejemplo:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* 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 dará estilo a todos inputy textareamarcadores de posición.

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

También es posible que desee diseñar áreas de texto:

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

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

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

Además de la respuesta de toscho, he notado algunas inconsistencias en el kit web entre Chrome 9-10 y Safari 5 con las propiedades CSS admitidas que vale la pena señalar.

Específicamente Chrome 9 y 10 no son compatibles background-color, border, text-decorationy text-transformcuando el estilo del marcador de posición.

La comparación completa entre navegadores está aquí .

Para usuarios de 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);
}

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" />

En Firefox e Internet Explorer, el color del texto de entrada normal anula la propiedad de color de los marcadores de posición. Entonces, 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; 
}

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

Usa el nuevo ::placeholdersi usas autoprefixer .

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

Ejemplo:

input::placeholder { color: black; }

Cuando se utiliza el corrector automático, lo anterior se convertirá al código correcto para todos los navegadores.

Ahora tenemos una forma estándar de aplicar CSS al marcador de posición de una entrada: ::placeholderpseudo-elemento de este Borrador de Nivel 4 del Módulo CSS.

Acabo de darme cuenta de algo para Mozilla Firefox 19+ que el navegador le da un valor de opacidad para el marcador de posición, por lo que el color no será lo que realmente desea.

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 opacityfor 1, por lo que será bueno ir.

No recuerdo dónde encontré este fragmento de código en Internet (no fue escrito por mí, 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. */
}

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

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

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

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

O si está utilizando Less :

.form-control{
    .placeholder(red);
}

Si está utilizando Bootstrap y no pudo hacer que esto funcione, entonces probablemente se haya perdido el hecho de que Bootstrap mismo 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 , 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;
}

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

Qué tal esto

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

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

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.

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

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Salida CSS, también puede tomar esta porción y pegarla en su 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;
}

pruebe este código para diferentes elementos de entrada diferentes estilos

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

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>

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

Dará estilo a todo, incluido el marcador de posición.

Lo siguiente establecerá ambas entradas en la misma paleta, utilizando el filtro de tono para el cambio de color. Se rinde muy bien ahora en los navegadores (excepto es decir ...)

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

Documentos de filtros CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

De acuerdo, los marcadores de posición se comportan de manera diferente en diferentes navegadores, por lo que debe 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 forma predeterminada, por lo que debe agregar 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;
}

Puede cambiar el color del marcador de posición de una entrada HTML5 con CSS. Si por casualidad, su conflicto 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.

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+ */

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

Brújula tiene una mezcla para esto fuera de la caja.

Toma tu ejemplo:

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

Y en SCSS usando brújula:

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

Consulte los documentos para el mixin de entrada-marcador de posición.

Aquí está la solución con selectores CSS

::-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 { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

• WebKit, Blink (Safari, Google Chrome, Opera 15+) y Microsoft Edge están utilizando un pseudo-elemento:
  :: - webkit-input-placeholder.
• Mozilla Firefox 4 a 18 está utilizando una
  pseudoclase:: -moz-placeholder (un colon).
  Mozilla Firefox 19+ está utilizando un pseudo-elemento:
  :: - moz-placeholder, pero el selector anterior seguirá funcionando por un tiempo.
• Internet Explorer 10 y 11 están utilizando una pseudoclase:
  pseudoclase:: -ms-input-placeholder.
• Internet Explorer 9 y versiones anteriores no admiten el atributo de marcador de posición, mientras que Opera 12 y versiones inferiores no admiten ningún selector CSS para marcadores de posición.

Una parte de HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Voy a mostrar cómo cambiar el color de expresión de 'Ingresar oración' por CSS:

  ::placeholder{
  color:blue;
   }