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