How do i change the color and font-family of the input form placeholder?

Question

I tried by changing color in body, didn't work well

Also, i tried doing instead of using body{ , using placeholder { , didn't work either

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #ffffff;
  background-color: #333;
}

<input type="text" placeholder="Placeholder..." />

score 0 · Answer 1 · answered Nov 14 '20 at 18:57

0

placeholder can be accessed by ::placeholder pseudo class.

So, if your input element's id is testinput then your css can be

#testinput::placeholder {
   color: blue;
   font-family: Arial;
}

answered Nov 14 '20 at 18:57

Ozgur Sar

2,067
2
11
23

score 0 · Answer 2 · answered Nov 14 '20 at 18:58

Here is your solution. Style the placeholder with the non-standard ::placeholder selector.

::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;
}

You have more info here: https://www.w3schools.com/howto/howto_css_placeholder.asp

How do i change the color and font-family of the input form placeholder?

2 Answers2