Placeholder Text

Well you discover something new everyday and every project and in this case I learned some interesting things about creating and styling placeholder text.

Placeholder text? Yes you know, that text that’s inside the search or input field on your favorite website. Well for my recent and on going project (Statify) I wanted to add some place holder text in the subscription box and I wanted it to be something that would be easy to implement and maintain.

So I first did a quick search and came across this, http://stackoverflow.com/questions/1077859/how-to-show-hide-input-value-on-focus which initially was looked like a possiblity but I didn’t want to mess around with a bunch of javascript, I wanted a simpler cleaner solution (I’m so digging python and django right now!).

So I did some more searching and found this, http://css-tricks.com/snippets/css/style-placeholder-text/ which was awesome, what I wanted could be achieve via CSS. But, I found it difficult to get it to work for some reason until I found this, http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css (I’m loving html5 by the way). This helped a lot to clarify what I had to do, but then I also realized I had not included the “:” colons in front of the rule (silly me). To see this working visit http://statifyme.com.

I also thought this was very useful for reference, https://developer.mozilla.org/en/CSS/%3a-moz-placeholder from mozilla, this of course applies only to firefox, but you can lookup the version for the other browser vendors.

< !doctype html>
<html>
<head>
  <title>Placeholder demo</title>
  <style type="text/css">
    input:-moz-placeholder {
      color: green;
    }
  </style>
</head>
<body>
  <input id="test" placeholder="Placeholder text!"/>
</body>
</html>