html - change - ¿Cómo cambiar el color del marcador de posición en el enfoque?

change color placeholder

Question

¿Cómo cambiar el color del marcador de posición cuando enfocas el campo de entrada? Uso este CSS para establecer el color predeterminado, pero ¿cómo cambiarlo en el enfoque?

::-webkit-input-placeholder { color: #999; }

/* Firefox < 19 */
:-moz-placeholder { color: #999; }

/* Firefox > 19 */
::-moz-placeholder { color: #999; }

/* Internet Explorer 10 */
:-ms-input-placeholder { color: #999; }

Answer 1

Además de la respuesta de Pranav, redefiní el código con la compatibilidad de textarea:

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }

:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }​

Answer 2

Desde Firefox 19: Se ha eliminado la pseudoclase: -moz-placeholder que coincide con los elementos de formulario con el atributo de marcador de posición, y se ha agregado en su lugar el pseudo-elemento :: - moz-placeholder.

input:focus::-moz-placeholder { color: transparent; }

Answer 3

Encontré esta solución con JQuery:

 $(''input[type="text"]'').each(function(){

    $(this).focus(function(){
      $(this).addClass(''input-focus'');
    });

    $(this).blur(function(){
      $(this).removeClass(''input-focus'');
    });

  });

con este css:

.input-focus::-webkit-input-placeholder { color: #f00; }    
.input-focus:-moz-placeholder { color: #f00; }
.input-focus:-ms-input-placeholder { color: #f00; }

Answer 4

Lo siguiente funcionó para mí:

input:focus::-webkit-input-placeholder
{
    color: red;
}

Answer 5

Prueba esto, esto debería funcionar:

input::-webkit-input-placeholder {
    color: #999;
}
input:focus::-webkit-input-placeholder {
    color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: #999;
}
input:focus:-moz-placeholder {
    color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
    color: #999;
}
input:focus::-moz-placeholder {
    color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999;
}
input:focus:-ms-input-placeholder {
    color: red;
}

Aquí hay un ejemplo: http://jsfiddle.net/XDutj/27/

Answer 6

Prueba esto:

HTML

<input type=''text'' placeholder=''Enter text'' />

CSS

input[placeholder]:focus { color: red; }

Answer 7

Puede crear un marcador de posición animado de diseño de material que se contraiga en la parte superior cuando se enfoca el campo de entrada.

<div class="field">
 <input type="text" name="user" required><br>
 <label>Enter Username</label>
 </div>

Básicamente, el campo de etiqueta va a actuar como un marcador de posición. Podemos hacer esto solo usando css. Explicado aquí http://www.voidtricks.com/create-material-design-animated-placeholder/

Answer 8

Use estrella * para seleccionar todo

*::-webkit-input-placeholder { color: #999; }


*:-moz-placeholder { color: #999; }


*::-moz-placeholder { color: #999; }


*:-ms-input-placeholder { color: #999; }