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




15 Answers

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

textarea placeholder css

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?




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



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



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



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.




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.




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



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.




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



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



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



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




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



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



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



Related