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

Question

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

Pero lo siguiente CSS No le 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 vez de red.

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

Answer 1

Implementación

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

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

Internet Explorer 9 y Lower no admite el placeholder atributo en absoluto, mientras Opera 12 e inferior no admiten Cualquier selector de CSS para marcadores de posición.

La discusión sobre la mejor implementación sigue sucediendo. Tenga en cuenta que los pseudo-elementos actúan como elementos reales en el Sombra Dom. A padding en una input no obtendrá el mismo color de fondo que el pseudo-elemento.

Selectores CSS

Los agentes de los usuarios deben ignorar una regla con un selector desconocido. Ver Nivel de selectores 3:

a grupo de selectores que contienen 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 de evitar malos contrastes. El marcador de posición de Firefox parece estar incumpliendo con una opacidad reducida, por lo que debe usar opacity: 1 aquí.
• Tenga en cuenta que el texto del marcador de posición se corta si no se ajusta: dote sus elementos de entrada en em y probarlos con una gran configuración de tamaño de fuente mínima. No olvides las traducciones: algunos idiomas Necesito más espacio para la misma palabra.
• Navegadores con soporte HTML para placeholder Pero sin el soporte de CSS para eso (como la ópera) también debe probarse.
• Algunos navegadores usan CSS predeterminado adicional para algunos input tipos (email, search). Estos podrían afectar la representación de maneras inesperadas. Utilizar el propiedades -webkit-appearance y -moz-appearance para cambiar eso. Ejemplo:

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

Answer 2

/* 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 estilo todo input y textarea marcadores de posición.

Nota IMPORTANTE: No agrupe estas reglas. En cambio, haga una regla separada para cada selector (un selector no válido en un grupo deja que todo el grupo sea inválido).

Answer 3

También es posible que desee diseñar texturas:

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

Answer 4

Para Oreja y Menos usuarios, hay una mezcla. Placeholder:

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

Answer 5

Además de la respuesta de Toscho, he notado algunas inconsistencias de WebKit 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 admiten background-color, border, text-decoration y text-transform Al diseñar el marcador de posición.

La comparación completa del navegador cruzado es aquí.

Answer 6

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

Answer 7

Esto funcionará bien. Demostración 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" />

Answer 8

En Firefox e Internet Explorer, el color de 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; 
}

Answer 9

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

Answer 10

Usa el nuevo ::placeholder si utiliza piloto automático.

Tenga en cuenta que el. Lugarholder se mezcla desde Oreja está desaprobado a favor de esto.

Ejemplo:

input::placeholder { color: black; }

Al usar AutoPrefixer, el anterior se convertirá en el código correcto para todos los navegadores.

Answer 11

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

Answer 12

Me doy 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á 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 Para 1, entonces será bueno ir.

Answer 13

No recuerdo dónde he encontrado 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. */
}

Answer 14

Creo que este código funcionará porque un marcador de posición solo se necesita 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;
}

Answer 15

Para Oreja usuarios, si estás usando class="form-control", puede haber un problema de especificidad CSS. Debe obtener una prioridad más alta:

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

O si esta usando Menos:

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

Answer 16

Si estas usando Oreja Y no pudo hacer que esto funcionara, entonces probablemente se perdió el hecho de que Bootstrap en sí agrega estos selectores. Este es Bootstrap v3.3 de la que estamos hablando.

Si está tratando de cambiar el marcador de posición dentro de un .Form-control Clase CSS, entonces debes anularlo así:

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

Answer 17

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

Answer 18

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.

Answer 19

He probado 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.

Answer 20

Para usuarios de SASS/SCSS usando Borbón, tiene una función incorporada.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Salida de CSS, también puede obtener esta porción y pegar 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;
}

Answer 21

Pruebe este código para un elemento de entrada diferente estilo diferente

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

Answer 22

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>

Answer 23

Agregar una posibilidad real y simple: Filtros CSS!

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

Lo siguiente establecerá ambas entrada en la misma paleta, utilizando el filtro de tono para el cambio de color. Ahora se vuelve muy bien 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 a los usuarios cambiarlo 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>

CSS FILTRES DOCS: https://developer.mozilla.org/en-us/docs/web/css/filter

Answer 24

Ok, 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 que sean idénticos, por ejemplo, Firefox da una transparencia al marcador de posición por defecto, 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 tenerlos 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;
}

Answer 25

Puede cambiar el color del marcador de posición de la 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.

Answer 26

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

Answer 27

The easiest way would be:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

Answer 28

Compass has a mixin for this out of the box.

Take your example:

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

And in SCSS using compass:

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

See docs for the input-placeholder mixin.

Answer 29

Here is the solution with CSS selectors

::-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+) and Microsoft Edge are using a pseudo-element:
  ::-webkit-input-placeholder.
• Mozilla Firefox 4 to 18 is using a pseudo-class:
  :-moz-placeholder (one colon).
  Mozilla Firefox 19+ is using a pseudo-element:
  ::-moz-placeholder, but the old selector will still work for a while.
• Internet Explorer 10 and 11 are using a pseudo-class:
  :-ms-input-placeholder.
• Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

Answer 30

A part of HTML:

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

I gonna show how to change color of expression of 'Enter sentence' by CSS:

  ::placeholder{
  color:blue;
   }