Styling Placeholder Text Using CSS

User avatar
Mitch
Posts: 39
Joined: Mon Jan 30, 2017 4:58 am

Styling Placeholder Text Using CSS

Sun Aug 12, 2018 8:43 am

In our example, let’s define a custom color for our placeholder text, and let’s also override the inherited font size to have smaller placeholder text. Here’s our base input styling:

Code: Select all

input[type="text"] {
  font-family: monospace;
  font-size: 18px;
  color: pink;
}

Code: Select all

input::placeholder {
  color: pink;
}
And here’s the styling for our placeholder text:

Code: Select all

::-webkit-input-placeholder {
  color: pink;
  font-size: 14px;
}
::-moz-placeholder {
  color: pink;
  font-size: 14px;
}
:-ms-input-placeholder {
  color: pink;
  font-size: 14px;
}
::placeholder {
  color: pink;
  font-size: 14px;
}
Unfortunately you can see that ::placeholder requires a slew of vendor prefixes at the moment.

Some info:

Code: Select all

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}


Return to “WEBSITE AND WEB DESIGN”

Links

In total there are 15 users online :: 0 registered, 0 hidden and 15 guests
Registered users: No registered users
Most users ever online was 156 on Sun Jun 17, 2018 7:42 am
Total posts 460
Total topics 339
Total members 69
Our newest member svetikvow
No birthdays today