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, ... %}