Burger mobile menu

Placeholder styling with CSS

Piotr Elmanowski Piotr Elmanowski | Published: 16 Nov, 2015

Placeholder is new in HTML5 and it is possible to change styling of this paraelement 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:

Effect:

Only for defined inputs

HTML:

CSS:

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:

CSS:

Effect:

browsers placeholders


 


 

Watch live demo | download example.

Tags: , , ,


Scroll top
Loading
Zdjęcie w lewo Zdjęcie w prawo