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


3976

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

Pero lo siguiente CSSno hace nada al valor del marcador de posición:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Valueseguirá siendo en greylugar de red.

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


375
Aviso rápido (no es una solución, solo un FYI): si recuerdo correctamente, la entrada [marcador de posición] solo coincide con las etiquetas <input> que tienen un atributo de marcador de posición, no coincide con el atributo del marcador de posición en sí.
pinkgothic

12
Yah, la idea cruzó por mi mente que esto puede ser como tratar de diseñar el atributo "título" de un elemento. ¡Entonces +1 por pensar igual!
David Murdoch

55
@MathiasBynens La pseudoclase mostrada con marcador de posición coincide con un elemento de entrada que muestra dicho texto de marcador de posición. Por lo tanto, coincide con la <input>etiqueta, como el inputselector, pero muestra texto de marcador de posición en este momento. Tampoco coincide con el atributo del marcador de posición en sí.
HEX

3
@HEX No es como el inputselector porque selecciona todos los inputelementos. :placeholder-shownsolo selecciona los inputelementos que actualmente muestran el marcador de posición, lo que le permite diseñar solo esos elementos y aplicar un estilo efectivo al texto del marcador de posición. ¿Qué estás tratando de decir?
Mathias Bynens

1
@HEX (Por supuesto, también seleccionó textareaelementos que muestran texto de marcador de posición).
Mathias Bynens

Respuestas:


4809

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 está utilizando una pseudoclase: :-moz-placeholder( un colon). [ Ref ]
  • Mozilla Firefox 19+ está utilizando un pseudo-elemento: ::-moz-placeholderpero el selector anterior seguirá funcionando durante 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 placeholderatributo en absoluto, mientras que Opera 12 y versiones inferiores no admiten ningún selector CSS para marcadores de posición.

La discusión sobre la mejor implementación aún continúa. Tenga en cuenta que los pseudoelementos actúan como elementos reales en Shadow DOM . A paddingen un inputno obtendrá el mismo color de fondo que el pseudo-elemento.

Selectores CSS

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

un grupo de selectores que contiene 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 para evitar malos contrastes. El marcador de posición de Firefox parece estar predeterminado con una opacidad reducida, por lo que debe usarse opacity: 1aquí.
  • Tenga en cuenta que el texto del marcador de posición solo se corta si no encaja: dimensione sus elementos de entrada emy pruébelos con una configuración de tamaño de fuente mínimo grande. No olvide las traducciones: algunos idiomas necesitan más espacio para la misma palabra.
  • placeholderTambién se deben probar los navegadores con soporte HTML pero sin soporte CSS para eso (como Opera).
  • Algunos navegadores usan CSS predeterminado adicional para algunos inputtipos ( email, search). Estos pueden afectar la representación de formas inesperadas. Usa las propiedades -webkit-appearance y -moz-appearancepara cambiar eso. Ejemplo:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

27
Tenga en cuenta también que, aunque Webkit considera que esto tiene una especificidad bastante fuerte, Mozilla no. Es probable que tengas que hacer aparecer algunos elementos importantes para que aparezcan las cosas.
dmnc

18
@toscho: gracias por la excelente respuesta. Solo necesitaba una pequeña demostración "en vivo", por lo que también se puede encontrar su ejemplo aquí: jsfiddle.net/Sk8erPeter/KyVXK . Gracias de nuevo.
Sk8erPeter

90
El marcador de posición de Firefox parece estar predeterminado con una opacidad reducida. Para cualquier otra persona que se refresque y se pregunte por qué diablos parece que esto no funciona ("por qué mi texto blanco sigue siendo gris ..."), use opacidad: 1
jwinn

8
En IE10 *:-ms-input-placeholdery :-ms-input-placeholderpor sí solo no funciona, pero INPUT:-ms-input-placeholdersí. Impar.
Jared

37
Nota para Bootstrap 3: la clase "form-control" anula el color debido a la especificidad CSS (es decir, "form-control :: - webkit-input-placeholder"), por lo que debe ser al menos tan específico o usar "! Important" en tu CSS. (Esto fue un infierno para depurar ya que ni Firebug ni Devtools parecen mostrar esta pseudo clase)
Costa

725

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


2
El documento de MSDN al que se vinculó indica que solo es compatible con Internet Explorer 10. Sigue siendo un buen hallazgo, pero no es muy útil hasta que la base de usuarios de IE10 se vuelva significativa (es posible que estemos viendo un período de años para eso).
danishgoel

1
Siendo realistas, querrá diseñar los marcadores de posición en todo el sitio de manera uniforme, no diseñar cada entrada individual por ID.
BadHorsie

10
Después de FF19 tienes que usar :: - moz-placeholder
viplezer

1
Debe colocar este CSS en la parte inferior de su hoja de estilo, si también aplica una clase en la entrada, para que funcione en IE (11). Vea esta bifurcación en JSFiddle jsfiddle.net/9kkef . Abra la página tanto en IE como en otro navegador, en IE verá que el texto del marcador de posición estará en el color de la clase aplicada.
Timo002

A veces, si no funciona, agregue la propiedad <! Important> a color.
Ahmed Na.

277

También es posible que desee diseñar áreas de texto:

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

2
sobre la impresión en Chrome no funciona ... ninguna ayuda @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -input-placeholder {color: #FFFFFF; }}
Mahdi Alkhatib

107

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

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

16
O incluso más simple, edite la variable @input-color-placeholder, que generalmente se encuentra en variables.less
William

@William, ¿no sería más fácil definir el selector en sí mismo y usar el mixin para evitar tener que retroceder y cambiarlo en caso de que esté buscando que el marcador de posición de otra entrada sea de un color diferente?
Brandito

@Brandito, que suena como un caso de borde, generalmente el color del marcador de posición es el mismo para todos los elementos de formulario dentro de un diseño.
William

@William Lo siento, soy terrible en la redacción de este tipo de cosas, pensé que sería mejor usar el mixin con el argumento del color de entrada que deseas, aunque, sinceramente, probablemente estoy pensando en los casos extremos. Estoy acostumbrado a (diseñar el marcador de posición de entrada de búsqueda donde está en un fondo de color: P) lo siento, pero tienes razón, disculpas.
Brandito

99

Además de la respuesta de toscho, he notado algunas inconsistencias en el kit web 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 son compatibles background-color, border, text-decorationy text-transformcuando el estilo del marcador de posición.

La comparación completa entre navegadores está aquí .


76

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

@content;
Forma

60

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


1
Tuve que agregar! Importante en Firefox v56 también
Savage

49

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

41

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


41

Usa el nuevo ::placeholdersi usas autoprefixer .

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

Ejemplo:

input::placeholder { color: black; }

Cuando se utiliza el corrector automático, lo anterior se convertirá al código correcto para todos los navegadores.


40

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


Esto funciona en Firefox 51. Solo voy a usar este método; los otros navegadores se pondrán al día lo suficientemente pronto para mí (dado que no se rompe la funcionalidad si no se aplica el estilo estándar).
Lonnie Best

36

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


35

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

3
Esta es la vieja forma de hacerlo, que he usado bastante. La desventaja es que el texto del marcador de posición desaparece cuando enfoca. He encontrado que esto es molesto cuando la interfaz de usuario no incluye etiquetas al lado de la entrada. En los últimos meses, comencé a reemplazar este método con el uso de texto de marcador de posición, lo que creo que es una mejora de UX.
Redtopia

44
El otro problema con un código como este es que el código del lado del servidor tiene que lidiar con el texto del marcador de posición como entrada vacía, lo que tiene problemas con los casos extremos en los que desea ingresar una ciudad llamada "Ciudad". En lugar de verificar los valores con el texto del marcador de posición, realmente debería usar una marca de modificación de datos en la entrada, y luego borrar la entrada en el envío del formulario si la marca no está configurada. Y para las interfaces AJAX, es posible que ni siquiera tenga un formulario, por lo que debería poder asociar un evento de envío arbitrario con la entrada. Esta es una de esas situaciones realmente simples que no lo es.
Whelkaholism

34

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

No uses este más. Hay varios elementos más con marcador de posición y más prefijos. Vea las soluciones anteriores o ::placeholderúselas junto con el corrector automático.
RiZKiT

33

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

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

O si está utilizando Less :

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

19

Si está utilizando Bootstrap y no pudo hacer que esto funcione, entonces probablemente se haya perdido el hecho de que Bootstrap mismo agrega estos selectores. Estamos hablando de Bootstrap v3.3.

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

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

17

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.


15
qué sucede si alguien vuelve a hacer clic después de escribir algo ... ¡el texto original que escribió desaparecerá!
Lucky Soni

3
@LuckySoni podrías hacer esto, pero personalmente prefiero el primero. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
user1729061

99
Incluso su segunda versión no proporciona la misma funcionalidad. Si el usuario envía el mensaje <form>con esta entrada, el texto del marcador de posición se enviará al servidor. He visto que muchos sitios hacen esto mal.
lqc

¡Esto es peligroso! ¡Si vuelves a la forma, lo perdiste todo!
Mobarak Ali

15

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.


2
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.Me parece que tienes alguna otra regla CSS que establece la colorpropiedad.
David Murdoch

8

Para usuarios de SASS / SCSS que usan Bourbon , tiene una función incorporada.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

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

8

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

5

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>


5

Agregar una posibilidad real muy agradable y simple: ¡ filtros css !

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

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

Lo siguiente establecerá ambas entradas en la misma paleta, utilizando el filtro de tono para el cambio de color. Se rinde muy bien ahora 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 que los usuarios lo cambien 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>

Documentos de filtros CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter


4

De acuerdo, 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 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 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;
}

3

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


3

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

2

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


1

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

0

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

  ::placeholder{
  color:blue;
   }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.