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


3975

O Chrome suporta o atributo placeholder nos input[type=text]elementos (outros provavelmente também o fazem).

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Valueainda permanecerá em greyvez de red.

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


375
Aviso rápido (não uma solução, apenas um FYI): se bem me lembro, a entrada [placeholder] apenas corresponde a tags <input> que possuem um atributo placeholder, não corresponde ao próprio atributo placeholder.
pinkgothic

12
Sim, passou pela minha cabeça que isso pode ser como tentar estilizar o atributo "title" de um elemento. Então, +1 por pensar da mesma forma!
David Murdoch

5
@MathiasBynens A pseudo-classe: placeholder mostrada corresponde a um elemento de entrada que está mostrando esse texto de placeholder. Portanto, ele corresponde à <input>tag, como o inputseletor, mas mostra o texto do espaço reservado agora. Também não corresponde ao próprio atributo de espaço reservado.
HEX 18/01

3
@ Hex Não é como o inputseletor porque seleciona todos os inputelementos. :placeholder-shownsomente seleciona inputelementos que estão atualmente mostrando o espaço reservado, permitindo que você estilize somente esses elementos e efetivamente estilize o texto do espaço reservado. O que você está tentando dizer?
Mathias Bynens

1
@HEX (Claro, que também selecionou textareaelementos que estão mostrando texto do espaço reservado.)
Mathias Bynens

Respostas:


4809

Implementação

Existem três implementações diferentes: pseudoelementos, pseudoclasses e nada.

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

O Internet Explorer 9 e inferior não suportam o placeholderatributo, enquanto o Opera 12 e inferior não suportam nenhum seletor CSS para espaços reservados.

A discussão sobre a melhor implementação ainda está em andamento. Observe que os pseudoelementos agem como elementos reais no DOM da sombra . A paddingem um inputnão terá a mesma cor de fundo do pseudo-elemento.

Seletores CSS

Os agentes do usuário são obrigados a ignorar uma regra com um seletor desconhecido. Consulte Seletores Nível 3 :

um grupo de seletores contendo um seletor inválido é inválido.

Portanto, precisamos de regras separadas para cada navegador. Caso contrário, o grupo inteiro 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 em falta com uma opacidade reduzida, por isso precisa ser usado opacity: 1aqui.
  • Observe que o texto do espaço reservado é cortado apenas se não couber - dimensione seus elementos de entrada eme teste-os com grandes configurações de tamanho mínimo de fonte. Não se esqueça das traduções: alguns idiomas precisam de mais espaço para a mesma palavra.
  • Navegadores com suporte a HTML para placeholdermas sem suporte a CSS para isso (como o Opera) também devem ser testados.
  • Alguns navegadores usam CSS padrão adicional para alguns inputtipos ( email, search). Isso pode afetar a renderização de maneiras inesperadas. Use as propriedades -webkit-appearance e -moz-appearancepara mudar isso. Exemplo:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

27
Observe também que, embora o Webkit considere isso com uma especificidade bastante forte, o Mozilla não. É provável que você precise colocar alguns! Importantes para que as coisas apareçam.
Dmnc

18
@toscho: obrigado pela ótima resposta. Eu só precisava de uma pequena demonstração dele "ao vivo", para que seu exemplo também possa ser acessado aqui: jsfiddle.net/Sk8erPeter/KyVXK . Obrigado novamente.
precisa saber é o seguinte

90
O espaço reservado do Firefox parece estar em falta com uma opacidade reduzida. Para qualquer outra pessoa hard-refrescante e se perguntando por que diabos isso não parece estar funcionando ( "porque é o meu texto branco ainda cinza .."), o uso de opacidade: 1
jwinn

8
No IE10 *:-ms-input-placeholdere :-ms-input-placeholderpor si só não funciona, mas INPUT:-ms-input-placeholderfunciona. Ímpar.
Jared

37
Nota para o Bootstrap 3: a classe "form-control" substitui a cor devido à especificidade do CSS (ou seja, "form-control :: - webkit-input-placeholder"), portanto, você precisa ser pelo menos tão específico ou usar "! Important" no seu CSS. (isso foi um inferno para depurar, pois nem o Firebug nem o Devtools parecem mostrar essa pseudo classe) #
Costa Costa

725

/* 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 estilizará todos inpute textareaespaç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 o grupo inteiro inválido).


2
O documento do MSDN ao qual você vinculou afirma que ele é suportado apenas no Internet Explorer 10. Ainda é uma boa descoberta, mas não é muito útil até que a base de usuários do IE10 se torne significativa (podemos estar olhando para um período de anos).
21412 danishgoel

1
Realisticamente, você deseja estilizar espaços reservados no site de maneira uniforme, não estilizar todas as entradas individuais por ID.
BadHorsie

10
Depois de FF19 você tem que usar :: - moz-espaço reservado
viplezer

1
Você precisa colocar esse CSS na parte inferior da folha de estilo, se você também aplicar uma classe na entrada, para fazê-la funcionar no IE (11). Veja este fork no JSFiddle jsfiddle.net/9kkef . Abra a página no IE e em outro navegador. No IE, você verá que o texto do espaço reservado será da cor da classe aplicada.
precisa saber é o seguinte

Às vezes, se não estiver funcionando, adicione a propriedade <! Important> à cor.
Ahmed Na.

277

Você também pode querer estilizar áreas de texto:

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

2
na impressão no chrome não funciona ... qualquer ajuda @media print {input [type = text] .form-control :: - webkit-input-placeholder, input [type = textarea] .form-control :: - webkit -input-placeholder {color: #FFFFFF; }}
Mahdi Alkhatib

107

Para usuários de Bootstrap e Menos , existe um mixplace .placeholder:

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

16
Ou ainda mais simples, editar a variável @input-color-placeholder- geralmente encontrada em variables.less
William

@William, não seria mais fácil definir o seletor em si e usar o mixin para evitar a necessidade de voltar atrás e alterá-lo, caso você queira tornar a marca de outra entrada com uma cor diferente?
Brandito

@Brandito - que soa como uma aresta - geralmente a cor do espaço reservado é a mesma para todos os elementos de formulário em um design.
William

@ William Desculpe, eu sou péssimo em escrever essas coisas, pensei que seria melhor usar o mixin com o argumento da cor de entrada que você deseja, embora, honestamente, provavelmente esteja pensando nos casos extremos. Eu costumava (estilizando o espaço reservado para entrada de pesquisa em um plano de fundo colorido: P), desculpe, mas você está certo, desculpas.
Brandito

99

Além da resposta de toscho, notei algumas inconsistências entre os kits da web entre o Chrome 9-10 e o Safari 5 com as propriedades CSS suportadas que merecem destaque.

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

A comparação completa entre navegadores é aqui .


76

Para usuários do 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);
}

Forma mais flexível - para uso@content;
milkovsky

60

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


1
Eu tive que adicionar importante no Firefox V56 também!
Savage

49

No Firefox e no Internet Explorer, a cor normal do texto de entrada substitui a propriedade de cor 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; 
}

41

Solução entre navegadores:

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


41

Use o novo ::placeholderse você usar o autoprefixer .

Observe que o .placeholder mixin do Bootstrap foi descontinuado em favor disso.

Exemplo:

input::placeholder { color: black; }

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


40

Agora, temos uma maneira padrão de aplicar CSS ao espaço reservado de uma entrada: ::placeholderpseudoelemento deste rascunho de nível 4 do módulo CSS.


Isso funciona no Firefox 51. Eu apenas vou usar esse método; os outros navegadores me alcançarão em breve (uma vez que nenhuma funcionalidade será interrompida se o estilo a não ser aplicado).
Lonnie Best

36

Acabei de perceber algo para o Mozilla Firefox 19+ que o navegador fornece um valor de opacidade para o espaço reservado, para que a cor não seja 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 sobrescrevo o opacityfor 1, então será bom ir.


35

Não lembro onde encontrei esse trecho de código na Internet (não foi escrito por mim, não lembro 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 esse código JavaScript e editar seu espaço reservado com CSS chamando esta regra:

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

3
Esta é a maneira antiga de fazer isso, que eu usei bastante. A desvantagem é que o texto do espaço reservado desaparece quando você se concentra. Achei isso irritante quando a interface do usuário também não inclui rótulos ao lado da entrada. Nos últimos meses, comecei a substituir esse método pelo uso de texto de espaço reservado, o que eu acho que é uma melhoria no UX.
Redtopia

4
O outro problema com um código como esse é o código do lado do servidor, que tem de lidar com o texto do espaço reservado como entrada vazia, o que tem problemas com casos extremos nos quais você deseja inserir uma cidade chamada "Cidade". Em vez de verificar valores no texto do espaço reservado, você realmente deve usar um sinalizador modificado por dados na entrada e, em seguida, desmarque a entrada no envio do formulário se o sinalizador não estiver definido. E para interfaces AJAX, você pode nem ter um formulário, portanto, você poderá associar um evento de envio arbitrário à entrada. Essa é uma daquelas situações realmente simples que não é.
Whelkaholism

34

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

Não use mais este. Existem vários outros elementos com espaço reservado e mais prefixos. Veja as soluções acima ou use ::placeholderjunto com o autoprefixer.
21318 RiZKiT

33

Para usuários do Bootstrap , se você estiver usando class="form-control", pode haver um problema de especificidade de 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);
}

19

Se você estiver usando o Bootstrap e não conseguiu fazer isso funcionar, provavelmente perdeu o fato de o próprio Bootstrap adicionar esses seletores. Estamos falando do Bootstrap v3.3.

Se você estiver tentando alterar o espaço reservado dentro de uma classe CSS .form-control , substitua-o 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;
}

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

17

Que tal agora

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

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


15
o que acontece se alguém clicar novamente depois de escrever algo .. o texto original que eles escreveram desaparecerá!
Sorte Soni

3
@ LuckySoni você poderia fazer isso, mas eu pessoalmente prefiro o primeiro. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
User1729061

9
Mesmo sua segunda versão não oferece a mesma funcionalidade. Se o usuário enviar a <form>mensagem com essa entrada, o texto do espaço reservado será enviado ao servidor. Eu já vi tantos sites fazendo isso errado.
Lqc 30/05

Isso é perigoso! Se você voltar ao formulário, você perdeu tudo!
Mobarak Ali 15/05/19

15

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

-webkit-text-fill-color: red;

qual fez o truque.


2
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.Parece-me que você tem alguma outra regra CSS que está definindo a colorpropriedade.
David Murdoch

8

Para usuários do SASS / SCSS usando o Bourbon , ele possui uma função integrada.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

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

8

tente este código para diferentes elementos de entrada e estilos diferentes

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

5

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>


5

Adicionando uma possibilidade muito agradável e simples: filtros css !

insira a descrição da imagem aqui

insira a descrição da imagem aqui

insira a descrição da imagem aqui

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

A seguir, as duas entradas serão definidas na mesma paleta, usando o filtro de matiz para alteração de cor. Agora é renderizado muito bem em navegadores (exceto ...)

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 o alterem dinamicamente, usando uma cor do tipo de entrada para alterações ou para encontrar nuances, confira este trecho:

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>

Documentos de filtros de CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/filter


4

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

3

Você pode alterar a cor do espaço reservado de uma entrada HTML5 com CSS. Se, por acaso, seu conflito de CSS, esta nota de código estiver 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.


3

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

2

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


1

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;
}
  • O WebKit, Blink (Safari, Google Chrome, Opera 15+) e Microsoft Edge estão usando um pseudo-elemento:
    :: - webkit-input-placeholder.
  • O Mozilla Firefox 4 a 18 está usando uma pseudo-classe
    :: -moz-placeholder (um dois pontos).
    O Mozilla Firefox 19+ está usando um pseudoelemento:
    :: - moz-placeholder, mas o seletor antigo ainda funcionará por um tempo.
  • O Internet Explorer 10 e 11 estão usando uma pseudo-classe
    :: -ms-input-placeholder.
  • O Internet Explorer 9 e inferior não suportam o atributo placeholder, enquanto o Opera 12 e inferior não suportam nenhum seletor CSS para placeholders.

0

Uma parte do HTML:

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

Vou mostrar como mudar a cor da expressão de 'Enter sentença' pelo CSS:

  ::placeholder{
  color:blue;
   }
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.