2.5 Style Placeholder Text

The placeholder text is an attribute introduced only recently with HTML5. It basically allows you to specify a temporary text value. So let's have a look at the example here. We have an input type text and the placeholder, which says search here. Now when I start typing something, that text disappears. And when the input is empty, it reappears. Now being a somewhat new edition, it's not entirely customizable yet. You need to use a bunch of vendor prefixes to style it. So let's begin with the web kit example. So, we're gonna do this. Webkit-input-placeholder. Right, let's make it a blue color. And there it is. Now this will not work in Mozilla right? It's still the same color. To target Mozilla, you need to do this, moz-placeholder. So a bit different name, but basically, it does the same thing. And there it is. And of course, the web kit holds its four. Now there's also a vendor prefix for Internet Explorer. So you would do ms-input-placeholder, color: green. So there you have it, a simple way to style those placeholder elements. Now you're not limited to just the text color. You can also affect the background color, right? So let's see an example. So background color, let's do something like this. And it changes the background color. You can also alter the font family. You can alter the font size, the padding, for example. So if I do one [INAUDIBLE] of padding, you get this result. But probably, most of the time, you'll just want to change the text color.