How to apply the change in placeholder color only in some text-box

Question

I would like to know how to change the placeholder color of specific inputs. Example:

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

Why am I asking ? Because I have a page where I style the placeholder as in the example CSS code, but my registration/profile forms also get this style.Example:

In that part I would like the placeholder to be darker.

And the one where he was normal.

Answer 1

In this case you need to define a class for the placeholder that you want to change.

Class selector

You can "invent" a name and define it as the value to be assigned to the class (class) attribute of the HTML element. The "invented" name will be the selector to apply CSS statements. And the interesting thing about classes is that they can be applied to any HTML element. What’s more, you can apply different styles to the same type of HTML element, using different classes for each of them.

That’s what you need!

See in the example below:

Note that I defined that the placeholder with the red color will be assigned only in elements that contain the class cor-vermelha.

In the html element I assign the class cor-vermelha through the following code: class="cor-vermelha"

NOTE: For the name you "invent" avoid using numbers and special characters. As far as possible use only a-z and A-Z letters. There are restrictions on the use of numbers and characters. My experience and advice: use only letters and characters - (dash) and _ (underlined).

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

Reference: Site Maujor

Answer 2

Use class=, thus:

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