How TO - Change Placeholder Color

Clash Royale CLAN TAG#URR8PPP <!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
How TO - Change Placeholder Color
❮ Previous
Next ❯
Learn how to change the color of the placeholder attribute with CSS.
Placeholder Color
Try it Yourself »
Step 1) Add HTML:
Use an input element and add the placeholder attribute:
Example
<input type="text" placeholder="A red placeholder text..">Step 2) Add CSS:
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.
Example
::placeholder
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
:-ms-input-placeholder /* Internet
Explorer 10-11 */
color: red;
::-ms-input-placeholder
/* Microsoft Edge */
color: red;
Try it Yourself »
❮ Previous
Next ❯