Placeholder styling

Styling of a placeholder text

by alekskorovin

HTML

<input type="text" value="" placeholder="Sample Placeholder">

CSS

:focus::-webkit-input-placeholder { color: transparent; }
:focus::-moz-placeholder          { color: transparent; } /* Firefox 19+ */
:focus:-moz-placeholder           { color: transparent; } /* Firefox 18 */

/* Color of Placeholder text */
::placeholder                     { color: #ccc; }
::-webkit-input-placeholder       { color: #ccc; }
::-moz-placeholder                { color: #ccc; opacity: 1; } /* Firefox 19+ */
:-moz-placeholder                 { color: #ccc; opacity: 1; } /* Firefox 18 */
:-ms-input-placeholder            { color: #ccc; }