Changing the font-style of placeholder text CSS
How to go about simply changing the font-style of placeholder CSS
Note: This post could also be called, why I am an idiot and need to look for simple answers.
I needed to make my placeholder text italic in a project I was working on recently.
Initially I figured because this is a relatively new HTML5 attribute, the CSS is going to involve some odd CSS vendor prefixes, and the first path I went down confirmed this.
To change the colour of your placeholder text use something like input:-moz-placeholder {color:red;} so I figured I would stick in input:-moz-placeholder {font-style: italic}, this didn’t work and I couldn’t figure why - vendor prefixed solutions are never 100% and I initially started looking to double check Mozilla hadn’t ripped this out or replaced it in newer versions of FireFox.
Then it dawned on me that it inherits some properties from its parent (input), so the change turned out to be incredibly simple: input {font-style:italic} did the trick.
There are two reasons why I didn’t immediately come up with this solution.
- In my head I had already started over-complicating it.
- The designs presented to me had only placeholder text, so I wasn’t thinking about how to style the input, just how to style the placeholder.
My lesson here is to not over think things too early on, try and find the simple solution first.