---
layout: post
title: "Style HTML input placeholders"
date: 2013-03-05 10:17
comments: true
categories: [css]
cover: /images/cover/avatar.png
keywords: css, webdesign, design, html5, html, form, input, style, customize, placeholder
description: Style and customize HTML input forms
---

Sometimes the default light gray placeholder color isn't suitable for our needs.

{% img center /images/css-placeholders-default.png Default gray placeholder %}

It is really easy to fix it, however the workaround doesn't work with Opera (but
who cares, Opera's burying Presto and moving to Webkit) and Internet Explorer <
10.

{% codeblock lang:css %}
/* webkit browsers */
::-webkit-input-placeholder {
  color: #24a396;
  opacity: 1;
}

/* gecko browsers */
::-moz-placeholder {
  color: #24a396;
  opacity: 1;
}

/* IE 10 */
:-ms-input-placeholder {
  color: #24a396;
  opacity: 1;
}
{% endcodeblock %}

As you can see I also added ```opacity``` property to make it look exactly the
same in all supported browsers.

You can ask yourself *"Why couldn't I write more space-efficient solution like
this?"*:
{% codeblock lang:css %}
::-moz-placeholder,
::-webkit-input-placeholder, 
:-ms-input-placeholder {
  color: #24a396;
  opacity: 1;
}
{% endcodeblock %}

When a browser doesn't understand a selector, it invalidates the entire line of
selectors. So that's why.

Result in Firefox: 

{% img center /images/css-placeholders-ff.png Firefox, Chromium, IE10, Safari, ... %}
