Change placeholder text colour and fade out on focus

::-webkit-input-placeholder { /* Safari, Chrome and Opera */ color: red; transition: .3s; } :-moz-placeholder { /* Firefox 18- */ color: red; transition: .3s; } ::-moz-placeholder { /* Firefox 19+ */ color: red; transition: .3s; } :-ms-input-placeholder { /* IE 10+ */ color: red; transition: .3s; } ::-ms-input-placeholder { /* Edge */ color: red; transition: .3s; } :focus::-webkit-input-placeholder { color: transparent } :focus:-moz-placeholder { color: transparent } :focus::-moz-placeholder { color: transparent } :focus:-ms-input-placeholder { color: transparent } :focus::-ms-input-placeholder { color: transparent }
In CSS4 we will get a standard property for this - :placeholder-shown - but until then we need these 5 vendor prefixed versions to do the job.
Also please note. You can't combine them in a single CSS block, they have to be separate!

5 Responses

This doesn't work on the current version of Edge
@Arron Tow Do you use normalize.css on the page as well? Checkout this Edge bug and especially the comments.
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3901363/
No, I do not use normalize.css. The comments mostly deal with opacity, which does work in Edge, but not the transition. Strange though that it will work in IE 11. Here's a fiddle demonstrating the issue: https://jsfiddle.net/shekky/nx2r7z65/
@Arron Tow Actually, I just tried and in IE11 the placeholder disappears as soon as the input receives focus which I believe is a known issue. I thought it was working in IE11, but I guess not.
@Arron Tow Looks like in the latest version of Firefox, it doesn't work either.

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.