Categories
CSS HTML

Change HTML placeholder text color

To change the text color of the HTML placeholder we can use ::placeholder css property. Most of the modern browsers support this pseudo-class. But still it requires some separate rules for each browsers.Here are the ways to declare css for different browsers

Change HTML placeholder text color
::-webkit-input-placeholder { /* WebKit, Blink, Edge /   
  color:#909; 
}
:-moz-placeholder { / Mozilla Firefox 4 to 18 /    
   color:    #909;
   opacity:  1; 
}
::-moz-placeholder { / Mozilla Firefox 19+ /
    color:    #909;
    opacity:  1;
 } 
:-ms-input-placeholder { / Internet Explorer 10-11 /
    color:    #909;
}
::-ms-input-placeholder { / Microsoft Edge /
    color:    #909;
} 
::placeholder { / Most modern browsers support this now. */
    color:    #909;
 }

Firefox’s placeholder has a reduced opacity by default, so needs to use opacity: 1 here.Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.

Leave a Reply

Your email address will not be published. Required fields are marked *