by Sai gowtham

How to change input element placeholder color in css

How to change input element placeholder color in css

In this tutorial, we are going to learn about how to change the placeholder color in css using ::placeholder pseudo-element selector.

::placeholder

In css, we have ::placeholder pseudo-element selector by using that we can change the placeholder color of an input or textarea element.

By default user-agent styles the placeholder text color to light-grey.

Let’s see an example.

Html

<input placeholder="Name"/>

Css

::-webkit-input-placeholder { /* WebKit, Blink, Edge,Chrome */
    color: green;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: green;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: green;
}

::-moz-placeholder { /* Firefox 19+ */
  color: green;
  opacity:  1;
}

::placeholder { /* Modern browsers */
  color: green;
}

By default, firefox reduces the placeholder text opacity so that we have added opacity:1 to the firefox selector.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course