Placeholder styling with CSS
Piotr Elmanowski | Published: 16 Nov, 2015
Placeholder is new in HTML5 and it is possible to change styling of this pseudo-element with CSS. It is very simple, but more advanced styling (last example) works differently between browsers.
Check examples below or: watch live demo | download example.
Placeholder simple styling
Styles added to inputs with defined class.
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
::-webkit-input-placeholder { color: #8A8A8A; } /* Firefox <18 */ :-moz-placeholder { color: #8A8A8A; } /* Firefox 19> */ ::-moz-placeholder { color: #8A8A8A; } :-ms-input-placeholder { color: #8A8A8A; } |
Effect:
Only for defined inputs
HTML:
|
1 |
<input type="text" name="test" placeholder="Start writing here" class="red-placeholder"> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.red-placeholder::-webkit-input-placeholder { color: #E30000; } /* Firefox <18 */ .red-placeholder:-moz-placeholder { color: #E30000; } /* Firefox 19> */ .red-placeholder::-moz-placeholder { color: #E30000; } .red-placeholder:-ms-input-placeholder { color: #E30000; } |
Effect:
Placeholder extreme styling 🙂
In most cases website placeholders are styled only with color and sometimes also with opacity. I’ve investigated how different browsers interpret other (usually not used for placeholders) CSS properties. It was tested on the newest versions of browsers in November 2015.
HTML:
|
1 |
<input type="text" name="test" placeholder="Very long placeholder is here" class="special-placeholder"> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
.special-placeholder::-webkit-input-placeholder { color: #FFF; font-weight: bold; opacity: 0.6; text-decoration: underline; text-shadow: 2px 2px 6px #5DA1DB; background: #A88800; letter-spacing: 4px; font-size: 15px; border-radius: 5px; border: 2px solid #000; padding: 15px; text-overflow: ellipsis; -moz-transform: rotateZ(-5deg); -webkit-transform: rotateZ(-5deg); -ms-transform: rotateZ(-5deg); transform: rotateZ(-5deg); } /* Firefox <18 */ .special-placeholder:-moz-placeholder { color: #FFF; font-weight: bold; opacity: 0.6; text-decoration: underline; text-shadow: 2px 2px 6px #5DA1DB; background: #A88800; letter-spacing: 4px; font-size: 15px; border-radius: 5px; border: 2px solid #000; padding: 15px; text-overflow: ellipsis; -moz-transform: rotateZ(-5deg); -webkit-transform: rotateZ(-5deg); -ms-transform: rotateZ(-5deg); transform: rotateZ(-5deg); } /* Firefox 19> */ .special-placeholder::-moz-placeholder { color: #FFF; font-weight: bold; opacity: 0.6; text-decoration: underline; text-shadow: 2px 2px 6px #5DA1DB; background: #A88800; letter-spacing: 4px; font-size: 15px; border-radius: 5px; border: 2px solid #000; padding: 15px; text-overflow: ellipsis; -moz-transform: rotateZ(-5deg); -webkit-transform: rotateZ(-5deg); -ms-transform: rotateZ(-5deg); transform: rotateZ(-5deg); } .special-placeholder:-ms-input-placeholder { color: #FFF; font-weight: bold; opacity: 0.6; text-decoration: underline; text-shadow: 2px 2px 6px #5DA1DB; background: #A88800; letter-spacing: 4px; font-size: 15px; border-radius: 5px; border: 2px solid #000; padding: 15px; -moz-transform: rotateZ(-5deg); -webkit-transform: rotateZ(-5deg); -ms-transform: rotateZ(-5deg); transform: rotateZ(-5deg); } |
Effect:
Watch live demo | download example.
