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

Question

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

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

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, however my registration / profile forms also get this style. Example:

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

Andinthathewasnormal.

css

asked by anonymous 06.07.2017 / 16:33

2 answers

1

Use class= , like this:

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

06.07.2017 / 16:40

C # Calling an object from a string How to count the elements of a li in jquery

score 3 · Accepted Answer

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

Selector class

You can "invent" a name and set it as the value to be assigned to the class attribute of the HTML element. The name "invented" will be the selector for applying CSS declarations. And the most interesting of classes is that they can be applied to any HTML element. What's more, you can apply different styles to the same HTML element type, using different classes for each of them.

That's what you need!

See the example below:

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

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

NOTE: For the name you "invent" avoid using numbers and special characters. As much 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 _ (underline).

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