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





textarea input (25)


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

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?




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




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 .




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



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




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



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>




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



También puede querer estilo textareas:

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



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






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.




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



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



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




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



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



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.




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



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.




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.




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

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

O si estás usando Less :

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



También puedes hacerlo usando SVG, si lo deseas:

var title = document.querySelector('h1'),
    text = title.innerHTML,
    svgTemplate = document.querySelector('svg'),
    charStyle = svgTemplate.querySelector('#text');

svgTemplate.style.display = 'block';

var space = 0;

for (var i = 0; i < text.length; i++) {
  var x = charStyle.cloneNode();
  x.textContent = text[i];
  svgTemplate.appendChild(x);
  x.setAttribute('x', space);
  space += x.clientWidth || 15;
}

title.innerHTML = '';
title.appendChild(svgTemplate);
<svg style="display: none; height: 100px; width: 100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs id="FooDefs">
        <linearGradient id="MyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="50%" stop-color="blue" />
            <stop offset="50%" stop-color="red" />
        </linearGradient>
    </defs>
    <text y="50%" id="text" style="font-size: 72px; fill: url(#MyGradient)"></text>
</svg>

<h1>This is not a solution X</h1>

http://codepen.io/nicbell/pen/jGcbq







html css html5 placeholder html-input