Browse code
New article
Cinan Rakosnik authored on 05/03/2013 at 17:17:01Showing 3 changed files
- source/_posts/2013-03-05-customize-html-input-placeholder.markdown
- source/images/css-placeholders-default.png
- source/images/css-placeholders-ff.png
| 1 | 1 |
new file mode 100644 |
| ... | ... |
@@ -0,0 +1,59 @@ |
| 0 |
+--- |
|
| 1 |
+layout: post |
|
| 2 |
+title: "Style HTML input placeholders" |
|
| 3 |
+date: 2013-03-05 10:17 |
|
| 4 |
+comments: true |
|
| 5 |
+categories: [css] |
|
| 6 |
+cover: /images/cover/avatar.png |
|
| 7 |
+keywords: css, webdesign, design, html5, html, form, input, style, customize, placeholder |
|
| 8 |
+description: Style and customize HTML input forms |
|
| 9 |
+--- |
|
| 10 |
+ |
|
| 11 |
+Sometimes the default light gray placeholder color isn't suitable for our needs. |
|
| 12 |
+ |
|
| 13 |
+{% img center /images/css-placeholders-default.png Default gray placeholder %}
|
|
| 14 |
+ |
|
| 15 |
+It is really easy to fix it, however the workaround doesn't work with Opera (but |
|
| 16 |
+who cares, Opera's burying Presto and moving to Webkit) and Internet Explorer < |
|
| 17 |
+10. |
|
| 18 |
+ |
|
| 19 |
+{% codeblock lang:css %}
|
|
| 20 |
+/* webkit browsers */ |
|
| 21 |
+::-webkit-input-placeholder {
|
|
| 22 |
+ color: #24a396; |
|
| 23 |
+ opacity: 1; |
|
| 24 |
+} |
|
| 25 |
+ |
|
| 26 |
+/* gecko browsers */ |
|
| 27 |
+::-moz-placeholder {
|
|
| 28 |
+ color: #24a396; |
|
| 29 |
+ opacity: 1; |
|
| 30 |
+} |
|
| 31 |
+ |
|
| 32 |
+/* IE 10 */ |
|
| 33 |
+:-ms-input-placeholder {
|
|
| 34 |
+ color: #24a396; |
|
| 35 |
+ opacity: 1; |
|
| 36 |
+} |
|
| 37 |
+{% endcodeblock %}
|
|
| 38 |
+ |
|
| 39 |
+As you can see I also added ```opacity``` property to make it look exactly the |
|
| 40 |
+same in all supported browsers. |
|
| 41 |
+ |
|
| 42 |
+You can ask yourself *"Why couldn't I write more space-efficient solution like |
|
| 43 |
+this?"*: |
|
| 44 |
+{% codeblock lang:css %}
|
|
| 45 |
+::-moz-placeholder, |
|
| 46 |
+::-webkit-input-placeholder, |
|
| 47 |
+:-ms-input-placeholder {
|
|
| 48 |
+ color: #24a396; |
|
| 49 |
+ opacity: 1; |
|
| 50 |
+} |
|
| 51 |
+{% endcodeblock %}
|
|
| 52 |
+ |
|
| 53 |
+When a browser doesn't understand a selector, it invalidates the entire line of |
|
| 54 |
+selectors. So that's why. |
|
| 55 |
+ |
|
| 56 |
+Result in Firefox: |
|
| 57 |
+ |
|
| 58 |
+{% img center /images/css-placeholders-ff.png Firefox, Chromium, IE10, Safari, ... %}
|
