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

Implementación

Hay tres implementaciones diferentes: pseudoelementos, pseudoclases y nada.

• WebKit, Blink (Safari, Google Chrome, Opera 15+) y Microsoft Edge están usando un pseudoelemento: ::-webkit-input-placeholder. ^[Ref.]
• Mozilla Firefox 4 a 18 utiliza una pseudoclase: :-moz-placeholder (. colon). ^[Ref.]
• Mozilla Firefox 19+ utiliza un pseudoelemento: ::-moz-placeholder, pero el antiguo selector seguirá funcionando durante un tiempo. ^[Ref.]
• Internet Explorer 10 y 11 utilizan una pseudoclase: :-ms-input-placeholder. ^[Ref.]
• 2017 de abril: La mayoría de los navegadores modernos admiten el pseudoelemento simple ::placeholder ^[Ref.]

Internet Explorer 9 y versiones anteriores no son compatibles con placeholder atributo en absoluto, mientras Opera 12 y versiones inferiores no son compatibles cualquier 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 DOM de sombra. Una padding en un input no obtendrá el mismo color de fondo que el pseudoelemento.

Selectores CSS

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

a Grupo de los selectores que contienen un selector no válido no es válido.

Entonces necesitamos reglas separadas para cada navegador. De lo contrario, todos los navegadores ignorarían a todo el grupo.

::-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 de 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 simplemente se corta si no encaja; dimensione sus elementos de entrada en em y pruébelos con una gran configuración de tamaño de fuente mínimo. No olvide las traducciones: algunos idiomas Necesito más espacio por la misma palabra.
• Navegadores con soporte HTML para placeholder pero sin soporte CSS para eso (como Opera) también debería probarse.
• Algunos navegadores utilizan CSS adicional predeterminado para algunos input tiposemail, search). Estos pueden afectar el renderizado de formas inesperadas. Utilizar el propiedades -webkit-appearance y -moz-appearance para 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 le dará estilo a todos input y textarea marcadores 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).

Es posible que también 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;
}

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

// 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 de webkit entre Chrome 9-10 y Safari 5 con las propiedades CSS compatibles 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 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);
}

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

Usa el nuevo ::placeholder si usas autoprefijador.

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

Ejemplo:

input::placeholder { color: black; }

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

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éditos: David Walsh

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

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. */
}

Me acabo de dar cuenta de algo para Mozilla Firefox 19+ que el navegador da un valor de opacidad para el marcador de posición, por lo que el color no será el 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 opacity por 1, así que estará listo.

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

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

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

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

O si estás usando Menos:

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

Si está utilizando Bootstrap y no pudo hacer que esto funcione, entonces probablemente se perdió 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 un .form-control Clase CSS, entonces debe anularla 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;
}

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.

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

Probé 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 utilizan Borbón, tiene una función incorporada.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Salida CSS, también puede tomar esta parte 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;
}

prueba este código para diferentes elementos de entrada de 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;
   }

Añadiendo una posibilidad real muy bonita y sencilla: filtros CSS!

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

Lo siguiente establecerá ambos input elementos en la misma paleta, utilizando el filtro de tono para cambios de color. Se renderiza 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, usando un color de tipo de entrada para los cambios, o para encontrar matices, consulte este fragmento:

Desde: 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()

body {background: black; color: white}

Choose a color!
<input type="color" id="stylo" oninput="stylElem()">
<br>
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
 <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

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>

De acuerdo, 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 forma predeterminada, por lo que debe agregar opacidad 1 a su css, más el color, no lo 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 CSS entra en conflicto, esta nota de código funciona, puede usar (! Important) como se muestra 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 el estilo de entrada y 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 sencilla 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;
}

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, parpadeo (Safari, Google Chrome, Ópera 15+) y Microsoft Edge están usando un pseudo-elemento:
  :: - marcador de posición de entrada de webkit.
• Mozilla Firefox 4 a 18 está usando una pseudo-clase:
  : -moz-placeholder (dos puntos).
  MozillaFirefox 19+ está usando un pseudo-elemento:
  :: - moz-placeholder, pero el antiguo selector seguirá funcionando por un tiempo.
• Internet Explorer 10 y 11 están usando una pseudoclase:
  : -ms-input-placeholder.
• Internet Explorer 9 y versiones inferiores no admiten el atributo de marcador de posición en absoluto, mientras que Opera 12 y versiones inferiores no admiten ningún selector de CSS para marcadores de posición.

Compass tiene un mixin 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 la mezcla de marcador de posición de entrada.

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 la expresión de 'Ingresar oración' por CSS:

  ::placeholder{
  color:blue;
   }