Change a HTML5 input's placeholder color with CSS

Question

Change a HTML5 input's placeholder color with CSS

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn't do anything to the placeholder's value:



input[placeholder], [placeholder], *[placeholder] {

    color: red !important;

}

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

Expand snippet
But Value will still remain grey instead of red.

Is there a way to change the color of the placeholder text?

html css

3 years ago by akshay1995

2 Answers

Login / Signup to Answer the Question.

Login Signup

**kshitijrana14** · Answer 1 · 2021-05-03T12:34:49

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

This will style all input and textarea placeholders.

Important Note: Do not group these rules. Instead, make a separate rule for every selector (one invalid selector in a group makes the whole group invalid).

**MounikaDasa** · Answer 2 · 2021-05-04T13:01:06

You may also want to style textareas:

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

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Change a HTML5 input's placeholder color with CSS

2 Answers

Login / Signup to Answer the Question.