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

input color css

Question

Chrome admite el atributo de marcador de posición en los elementos de 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 lugar de red .

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

Answer 1

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 usa una pseudo-clase :-moz-placeholder ( una coma). ^{[ 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 simple ::placeholder ^{[ Ref ]}

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

La discusión sobre la mejor implementación todavía está en marcha. Tenga en cuenta que los pseudo-elementos actúan como elementos reales en el DOM Shadow . Un padding en una 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. Ver selectores nivel 3 :

un group 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

• Ten cuidado de evitar los malos contrastes. El marcador de posición de Firefox parece ser el valor predeterminado con una opacidad reducida, por lo que debe usar la opacity: 1 aquí.
• Tenga en cuenta que el texto del marcador de posición solo se corta 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 la misma palabra.
• Los navegadores con compatibilidad con HTML para placeholder de placeholder pero sin compatibilidad con CSS para eso (como Opera) también deben probarse.
• Algunos navegadores utilizan CSS predeterminado adicional para algunos tipos de input ( email , search ). Esto podría afectar la representación de formas inesperadas. Utilice las properties -webkit-appearance y -moz-appearance para cambiar eso. Ejemplo:

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

Answer 2

Añadiendo una posibilidad real muy agradable y simple: ¡ filtros css !

Lo 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 renderiza muy bien ahora en los navegadores (excepto ie ...)

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, echa un vistazo a este fragmento de código:

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

<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

Answer 3

Acabo de darme cuenta de algo para Mozilla Firefox 19+: el navegador le da un valor de opacidad al 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 la opacity por 1, por lo que será bueno ir.

Answer 4

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 background-color , el border , text-decoration text-transform cuando se estiliza el marcador de posición.

La comparación completa entre navegadores está here .

Answer 5

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

Answer 6

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 7

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

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

Answer 8

De acuerdo, los marcadores de posición se comportan de manera diferente en diferentes navegadores, por lo que necesita usar el prefijo de 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;
}

Answer 9

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

Answer 10

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 11

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

Answer 12

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.

Answer 13

Intente este código para diferentes elementos de entrada diferente estilo

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 14

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

Answer 15

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

Answer 16

Para el usuario SASS / SCSS que utiliza Bourbon , tiene una función incorporada.

//main.scss
@import ''bourbon'';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS Output, también puedes tomar esta porción 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;
}

Answer 17

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

Answer 18

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

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

O si estás usando Less :

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

Answer 19

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

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

Answer 20

Puede 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.

Answer 21

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

Answer 22

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.

Answer 23

Si está utilizando Bootstrap y no pudo hacer que esto funcionara, es probable que se haya perdido el hecho de que Bootstrap agrega estos selectores. Esto es Bootstrap v3.3 de lo que estamos hablando.

Si está intentando cambiar el marcador de posición dentro de una clase de CSS de control de formulario, 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;
}

Answer 24

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 25

También puede querer estilo textareas:

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

Answer 26

Use el nuevo ::placeholder si usa autoprefixer .

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

Ejemplo:

input::placeholder { color: black; }

Cuando se usa autoprefixer, lo anterior se convertirá en el código correcto para todos los navegadores.

Answer 27

prueba esto te ayudará esto funcionará 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;
    }

Answer 28

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

Ver los documentos para la entrada de marcador de posición mixin.

Answer 29

/* 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 input marcadores de input y de área de 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).

Answer 30

<style>
    ::-webkit-input-placeholder { 
        color:red; 
     }
    ::-moz-placeholder { 
        color:red; 
    } /* firefox 22+ */
    :-ms-input-placeholder { 
        color:red; 
    } /* ie10,11 */
    input:-moz-placeholder { 
        color:red; 
    }
 </style>