html - texto - textarea placeholder css




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

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?


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

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


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 .


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.


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

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

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

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


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

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

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

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

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

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.


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.


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

También puede querer estilo textareas:

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

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.



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





html-input