Since I can’t seem to get these posted on the days designated to my CSS-themed line of blog posts (CSS Thursdau, CSS Tuesday, etc), I figured I should just use a general name for the posts from here on out.
So, I think “I Heart CSS” is an appropriate name for this series of blog posts detailing all the cool things you can do with CSS.
Now that that is out of the way, I can focus on a pseudo-class in CSS that eliminates the aggravation of trying to style the placeholder text that appears in input fields.
Stylin’ The Input
CSS provides a few ways to style input fields and text. I’ve put together an example that outlines some simple classes you can use:
These styles are extremely helpful for styling forms and branding them to follow the color palette of your website, however you may have noticed there was no code in there to color the placeholder text in the input field.
What is the placeholder text?
In the image above, you can see the placeholder text as “test”, which is something you can define in the HTML code for the input field.
Now, if you want to keep the branded colors of your website consistent throughout, you may want to tweak this text to reflect that, but how would you do it?
Make the Placeholder Text…Less Boring
W3C released a special pseudo class to assist with coloring the placeholder text in CSS. It was included in a list of level 4 selectors and released in May of 2013, so it’s been around for a while.
That pseudo-class is: :placeholder-shown, and is pretty awesome for making your placeholder text sexy.
Here’s an example of it in action (Note: this pseudo-class requires added components depending on the browser you are using to view it, more about that here):
If you examine the CSS, you’ll notice a few differences.
The first difference is minor, but the pseudo-class name changes depending on what browser component you’re assigning it to. For example, if you’re coding for webkit, the code comes out as: ::-webkit-input-placeholder, but the standard usage comes out as: :placeholder-shown.
The second difference is that there seems to be an issue with the standard :placeholder-shown processing text color, which is why I had to assign it to the webkit-input-placeholder. In fact, if you attempt to use any of the properties from the standard placeholder pseudo class in the webkit in the example I’ve provided, things become a bit buggy.
Despite this, the pseudo-class is a very welcome addition to the CSS family, especially for web designers who like to have that little bit of extra control over every aspect of their website.
What do you guys think? Is the placeholder pseudo-class useful or just another arbitrary class for tweaking designs?
The post I Heart CSS: Form Placeholder Text Styling appeared first on Frank Design.
