Last Updated on June 17, 2021 by Roshan Parihar
In this tutorial, learn how to change input placeholder color in CSS. The short answer is to use the ::placeholder selector of CSS that works on almost all major browsers.
You also have to use a separate selector for Internet Explorer and Microsoft to make it work. Let’s find out with the examples given below to learn the method.
How to Change Input Placeholder Color Using CSS
To modify the input placeholder color and other properties, you have to use the example CSS as given below:
|
1 2 3 4 5 6 7 8 9 |
:-ms-input-placeholder { /* IE 10-11 */ color: pink; } ::-ms-input-placeholder { /* Microsoft Edge */ color: pink; } ::placeholder { /* Chrome/Opera/Safari 10.1+/Firefox */ color: pink; } |
Output
Explanation of Example
::placeholder: The selector selects the placeholder of input text and works on major browsers. However, it will not work on Internet Explorer and Microsoft Edge.
::-ms-input-placeholder: It selects the placeholder to change the input text and works only on the newest browser Microsoft Edge.
:-ms-input-placeholder: The selector selects the input text placeholder to modify the text content of the placeholder and works only on Internet Explorer 10 and 11.
How to Style Input Type and Its Placeholder Using Bootstrap
In addition to the above example, you can also create a placeholder with some style added to it using Bootstrap. It’s easier to use Bootstrap that comes with pre-defined styles for the input field and its placeholder. You have to just add a Bootstrap class .form-control to the <input> field.
|
1 |
<input type="text" placeholder="Your Name" class="form-control"/> |
Output
The above example shows the full-width input field with a styled placeholder.
You May Also Like to Read
Advertisements
Advertisements