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



Answers

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
<input    placeholder='hello'/> <br />
<textarea placeholder='hello'></textarea>

Esto estilizará todos input marcadores de posición de textarea y de input .

Nota importante: No agrupe estas reglas. En cambio, crea una regla separada para cada selector (un selector no válido en un grupo hace que el grupo completo no sea válido).

Question

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

Pero el siguiente CSS no hace nada con el 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?




puede usar esto para el estilo de entrada y 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+ */

iraweb




intente esto le ayudará esto funcionará en todos sus buscadores favoritos:

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }



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



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






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



OK, los marcadores de posición se comportan de manera diferente en diferentes navegadores, por lo que necesitas usar el prefijo del navegador en tu CSS para hacerlos idénticos, por ejemplo, Firefox da una transparencia al marcador por defecto, así que necesitas agregar opacidad 1 a tu CSS, más el color, no una gran preocupación la mayoría de las veces, pero es bueno tenerlos constantes:

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



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



Me acabo de dar 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 quieres.

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

Sobreescribo la opacity para 1, así que será bueno ir.




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.




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

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



Prueba esto

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}



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



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




Links