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




textarea placeholder css (24)

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?


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.


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>

También puede querer estilo textareas:

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

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.


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


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

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


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.


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

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

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


No recuerdo dónde encontré este fragmento de código en Internet (no lo escribí yo, 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. */
}

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


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

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

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

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

prueba esto te ayudará esto funcionará en todos tus navegadores de favoritos:

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

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

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

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>







html-input