Altere a cor do espaço reservado de uma entrada HTML5 com CSS

Question

O Chrome suporta o atributo de espaço reservado sobre input[type=text] elementos (outros provavelmente também).

Mas o seguinte CSS não faz nada com o valor do espaço reservado:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Value ainda permanecerá grey ao invés de red.

Existe uma maneira de mudar a cor do texto de espaço reservado?

Answer 1

Implementação

Existem três implementações diferentes: pseudo-elementos, pseudo-classes e nada.

• Webkit, Blink (Safari, Google Chrome, Opera 15+) e Microsoft Edge estão usando um elemento pseudo-elemento: ::-webkit-input-placeholder. ^[Ref]
• Mozilla Firefox 4 a 18 está usando uma pseudo-classe: :-moz-placeholder (1 cólon). ^[Ref]
• O Mozilla Firefox 19+ está usando um elemento pseudo-elemento: ::-moz-placeholder, mas o antigo seletor ainda funcionará por um tempo. ^[Ref]
• Internet Explorer 10 e 11 estão usando uma pseudo-classe: :-ms-input-placeholder. ^[Ref]
• Abril de 2017: A maioria dos navegadores modernos suporta o elemento simples ::placeholder ^[Ref]

Internet Explorer 9 e Lower não suporta o placeholder atributo, enquanto Ópera 12 e inferior não suportam Qualquer seletor de CSS para espaços reservados.

A discussão sobre a melhor implementação ainda está acontecendo. Observe que os pseudo-elementos agem como elementos reais no Shadow Dom. UMA padding em um input não terá a mesma cor de fundo que o elemento pseudo-elemento.

Seletores CSS

Os agentes de usuário devem ignorar uma regra com um seletor desconhecido. Ver Seletores Nível 3:

uma grupo de seletores que contêm um seletor inválido é inválido.

Portanto, precisamos de regras separadas para cada navegador. Caso contrário, todo o grupo seria ignorado por todos os 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

• Tenha cuidado para evitar maus contrastes. O espaço reservado do Firefox parece estar inadimplendo com uma opacidade reduzida, então precisa usar opacity: 1 aqui.
• Observe que o texto do espaço reservado é apenas cortado se não se encaixar - dimensione seus elementos de entrada em em e teste -os com grandes configurações mínimas de tamanho de fonte. Não se esqueça das traduções: alguns idiomas Precisa de mais espaço para a mesma palavra.
• Navegadores com suporte HTML para placeholder Mas sem o suporte ao CSS para isso (como ópera) também deve ser testado.
• Alguns navegadores usam CSs padrão adicionais para alguns input tipos (email, search). Isso pode afetar a renderização de maneiras inesperadas. Use o propriedades -webkit-appearance e -moz-appearance para mudar isso. Exemplo:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Answer 2

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

Isso vai estilizar tudo input e textarea espaços reservados.

Nota importante: Não agrupe essas regras. Em vez disso, faça uma regra separada para cada seletor (um seletor inválido em um grupo torna todo o grupo inválido).

Answer 3

Você também pode querer estilizar textaras:

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

Answer 4

Por Bootstrap e Menos Usuários, há um mixin .Place -tholder:

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

Answer 5

Além da resposta de Toscho, notei algumas inconsistências do Webkit entre o Chrome 9-10 e o Safari 5 com as propriedades CSS suportadas que valem a pena notar.

Especificamente o Chrome 9 e 10 não suportam background-color, border, text-decoration e text-transform Ao denominar o espaço reservado.

A comparação completa do navegador cruzado é aqui.

Answer 6

Por Sass usuários:

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

Answer 7

Isso vai funcionar bem. Demo aqui:

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

Answer 8

No Firefox e na Internet Explorer, a cor do texto de entrada normal substitui a propriedade de cores dos espaços reservados. Então, precisamos

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

Answer 9

Solução de navegador transversal:

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

Answer 10

Use as novas ::placeholder se você usar Autoprefixer.

Observe que o local do local se mistura de Bootstrap é preterido em favor disso.

Exemplo:

input::placeholder { color: black; }

Ao usar o Autoprefixer, o acima será convertido no código correto para todos os navegadores.

Answer 11

Agora, temos uma maneira padrão de aplicar CSS ao espaço reservado de uma entrada: ::placeholder pseudo-elemento de isto Módulo CSS Nível 4 Rascunho.

Answer 12

Eu apenas percebo algo para o Mozilla Firefox 19+ que o navegador dá um valor de opacidade para o espaço reservado, então a cor não será o que você realmente deseja.

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

Eu substituo o opacity Para 1, então será bom ir.

Answer 13

Não me lembro de onde encontrei esse trecho de código na internet (não foi escrito por mim, não me lembro de onde o encontrei, nem quem o escreveu).

$('[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('');
            }
        })
    });

Basta carregar este código JavaScript e editar seu espaço reservado com CSS chamando esta regra:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

Answer 14

Eu acho que esse código funcionará porque um espaço reservado é necessário apenas para o texto do tipo de entrada. Portanto, este CSS de uma linha será suficiente para sua necessidade:

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

Answer 15

Por Bootstrap usuários, se você estiver usando class="form-control", pode haver um problema de especificidade do CSS. Você deve ter uma prioridade mais alta:

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

Ou se você estiver usando Menos:

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

Answer 16

Se você está usando Bootstrap E não conseguiu fazer isso funcionar, então provavelmente você perdeu o fato de que o próprio Bootstrap adiciona esses seletores. Este é o Bootstrap v3.3 de que estamos falando.

Se você está tentando mudar o espaço reservado dentro de um .form-controle CLASSE CSS Então você deve substituí -la assim:

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

Answer 17

Este código curto e limpo:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

Answer 18

Que tal agora

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

Nenhum CSS ou espaço reservado, mas você obtém a mesma funcionalidade.

Answer 19

Eu tentei todas as combinações aqui para mudar a cor, na minha plataforma móvel, e eventualmente foi:

-webkit-text-fill-color: red;

que fez o truque.

Answer 20

Para o usuário SASS/SCSS usando Bourbon, tem uma função interna.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Saída CSS, você também pode pegar essa parte e colar em seu 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;
}

Answer 21

Experimente este código para um elemento de entrada diferente estilo diferente

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

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

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

Answer 22

Aqui está mais um exemplo:

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

Answer 23

Adicionando uma possibilidade muito agradável e simples: Filtros CSS!

Ele irá estilizar tudo, incluindo o espaço reservado.

O seguinte definirá a entrada da mesma paleta, usando o filtro HUE para alteração de cor. Renderiza muito bem agora nos navegadores (exceto ou seja ...)

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 os usuários mudem dinamicamente, usando uma cor do tipo de entrada para alterações ou para encontrar nuances, confira este snippet:

A partir 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>

Filtros CSS Docs: https://developer.mozilla.org/en-us/docs/web/css/filter

Answer 24

OK, os espaços reservados se comportam de maneira diferente em diferentes navegadores, então você precisa usar o prefixo do navegador em seus CSs para torná -los idênticos, por exemplo, o Firefox fornece uma transparência ao espaço reservado por padrão; portanto, precisa adicionar opacidade 1 ao seu CSS, além da cor, não é Uma grande preocupação na maioria das vezes, mas é bom tê -los 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;
}

Answer 25

Você pode alterar a cor do espaço reservado de uma entrada HTML5 com o CSS. Se por acaso, seu conflito CSS, essa nota de código funcionando, você pode usar (! IMPORTANTE) como abaixo.

::-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 isso ajude.

Answer 26

Você pode usar isso para entrada e estilo de foco:

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

Answer 27

A maneira mais fácil seria:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

Answer 28

Bússola tem um mixin para isso fora da caixa.

Veja o seu exemplo:

<input type="text" placeholder="Value">

E no SCSS usando bússola:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Consulte os documentos para o mixin de entrada do local de entrada.

Answer 29

Aqui está a solução com Seletores 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, piscar (Safari, Google Chrome, Opera 15+) e Microsoft borda estão usando um elemento pseudo-elemento:
  ::-Webkit-input-placeholder.
• Mozilla Firefox 4 a 18 está usando uma pseudo-classe:
  : -moz-placeholder (um cólon).
  Mozilla Firefox 19+ está usando um elemento pseudo-elemento:
  ::-Moz-placeholder, mas o antigo seletor ainda funcionará por um tempo.
• Internet Explorer 10 e 11 estão usando uma pseudo-classe:
  : -MS-INPUT-PLAPETHER.
• Internet Explorer 9 E a Lower não suporta o atributo de espaço reservado, enquanto a Opera 12 e a Lower não suporta nenhum seletor de CSS para os espaços reservados.

Answer 30

Uma parte do HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Eu vou mostrar como mudar a cor da expressão de 'Enter Sinence' pelo CSS:

  ::placeholder{
  color:blue;
   }