1

Gostaria de saber como mudar a cor do placeholder de inputs específicos. Exemplo:

input{
display:block;
margin-bottom:5px;
width:200px;
}


::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red;
    opacity: 1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
    opacity: 1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}
<input type="text" placeholder = "Esse na cor que eu desejar">

<input type="text" placeholder = "Esse na cor padrão">

Porque estou perguntando ? Porque eu tenho uma página onde eu estilizo o placeholder como no código CSS do exemplo, porém os meus formulários de registro/perfil também recebem esse estilo.Exemplo:

Nessa parte gostaria que o placeholder fosse mais escuro. Quero que estilize

E nessa que ele fosse normal. Placeholder normal

2 Respostas 2

3

Neste caso você precisa definir uma classe para o placeholder que você deseja alterar.

Seletor classe

Você pode "inventar" um nome e definí-lo como valor a ser atribuido ao atributo class (classe) do elemento HTML. O nome "inventado" será o seletor para aplicar declarações CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML, usando classes diferentes para cada um deles.

É isso que você precisa!

Veja no exemplo abaixo:

Note que eu defini que o placeholder com a cor vermelha vai ser atribuído somente em elementos que conterem a classe cor-vermelha.

No elemento html eu atribui a classe cor-vermelha a ele através do seguinte código: class="cor-vermelha"

NOTA: Para o nome que você "inventa" evite usar números e caracteres especiais. Tanto quanto possível use só letras de a-z e de A-Z. Há restrições quanto ao uso de números e caracteres. Minha experiência e conselho: use somente letras e os caracteres - (traço) e _ (sublinhado).

input{
display:block;
margin-bottom:5px;
width:200px;
}


.cor-vermelha::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
}

.cor-vermelha:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red;
    opacity: 1;
}

.cor-vermelha::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
    opacity: 1;
}

.cor-vermelha:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}

.cor-vermelha::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}
<input type="text" class="cor-vermelha" placeholder = "Esse na cor que eu desejar">

<input type="text" placeholder = "Esse na cor padrão">

Referência: Site Maujor

1

Use class=, assim:

input{
display:block;
margin-bottom:5px;
width:200px;
}


.especifico::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: red;
}

.especifico:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: red;
    opacity: 1;
}

.especifico::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
    opacity: 1;
}

.especifico:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: red;
}

.especifico::-ms-input-placeholder { /* Microsoft Edge */
    color: red;
}
<input class="especifico" type="text" placeholder = "Esse na cor que eu desejar">

<input type="text" placeholder = "Esse na cor padrão">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .