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