Blog

Tag: Placeholder

Float input labels with :placeholder shown

Float input labels with :placeholder shown

Misc

This is popular nowadays to animate labels dynamically above the input field. It feels very cool and the user gets good feedback with animating input labels. You can also clear the input from the clear button/icon on the right-hand side, further adding to the user experience.

Placeholder Image with custom background

Placeholder Image with custom background

Misc

This is the lightest way to include placeholder images in HTML pages. All images are fully optimized Scalable Vector Graphics (SVG) and can be customized to any size or color as need. A short label can also be added to images to keep a track of what goes where in your designs and mockups.

Input Placeholder CSS

Input Placeholder CSS

Misc

Input Placeholder This css snippets can be used to style placeholders of entire website or any form element ::-webkit-input-placeholder { /* Chrome/Opera/Safari */  color: pink;}::-moz-placeholder { /* Firefox 19+ */  color: pink;}:-ms-input-placeholder { /*...
Input ::placeholder Style

Input ::placeholder Style

Misc

::-webkit-input-placeholder { /* Chrome/Opera/Safari / color: pink; } ::-moz-placeholder { / Firefox 19+ / color: pink; } :-ms-input-placeholder { / IE 10+ / color: pink; } :-moz-placeholder { / Firefox 18- */ color: pink; } More info...