- Overview
- Transcript
2.5 Style Placeholder Text
The placeholder text is an attribute introduced only recently along with HTML5. It basically allows you to specify a temporary text value which will get deleted once the form input is focused.
1.Introduction1 lesson, 00:41
1.1Welcome00:41
2.Typography6 lessons, 17:23
2.1Use CSS Shorthand04:05
2.2Change Text Selection Color01:50
2.3Awesome Font Stacks04:10
2.4Drop Caps03:00
2.5Style Placeholder Text02:15
2.6Remove Dotted Outline on Links02:03
3.Forms2 lessons, 10:52
3.1Create Custom Radio Buttons and Checkboxes06:38
3.2Create Awesome States on Form Elements04:14
4.Positioning3 lessons, 12:29
4.1Horizontal and Vertical Centering03:48
4.2Absolutely Center an Image03:41
4.3Properly Clear and Contain Floats05:00
5.CSS Generated Elements4 lessons, 17:44
5.1CSS Triangles05:14
5.2CSS Circles01:36
5.3Create a Layered Paper Effect05:30
5.4Get Creative With the List Bullets05:24
6.Useful Techniques3 lessons, 08:52
6.1Create a Fixed Back to Top Button03:35
6.2Even and Odd Rows03:36
6.3Create Fluid Images01:41
7.Conclusion1 lesson, 01:47
7.1Recap01:47
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.