skip to Main Content

Change Placeholder Color CSS

Change placeholder color CSS


Many times we need to change the placeholder color as per customer requirement. So, Today we are going to learn. How we can change placeholder color CSS. CSS provide default dark color for the placeholder. CSS provides awesome functionality that allows changing the default placeholder color.

First of all, We are going to create the HTML field with placeholder like

[code lang=”HTML”]<input name=”first_name” type=”text” placeholder=”First Name” />[/code]

Our HTML field is ready, let’s write the CSS for changing the color of placeholder like

::-webkit-input-placeholder {
    color: #FFFFFF;
}
::-moz-placeholder {
    color: #FFFFFF;
}
:-ms-input-placeholder {
    color: #FFFFFF;
}
:-moz-placeholder {
    color: #FFFFFF;
}

 

After writing the above CSS all fields placeholder color changes to white as per CSS.

Many times we need to change the color of placeholder for specific element rather than all elements,

input[name="first_name"]::-webkit-input-placeholder {
    color: #FFFFFF;
}
input[name="first_name"]::-moz-placeholder {
    color: #FFFFFF;
}
input[name="first_name"]:-ms-input-placeholder {
    color: #FFFFFF;
}
input[name="first_name"]:-moz-placeholder {
    color: #FFFFFF;
}

 

let’s check only those element which name contains “first_name” only those element placeholder color changes Not apply to all elements.

So, it’s too easy to change the element placeholder default color as we want using above CSS snippet.

Saroj

I am a web designer and developer part-time blogger. Write something on some free time. Find my every day thought here :)

Leave a Reply

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

Back To Top