How TO - Change Placeholder Color

The name of the pictureThe name of the pictureThe name of the pictureClash 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 ❯

Popular posts from this blog

California

New York City

CNN