Question

I’m trying to achieve text inputs like those on Square’s website. Essentially, inputs that have the <label> in them. When you click inside of it, the text becomes lighter and when you start typing, it disappears. I previously found a snippet but since it was position:absolute;, it ended up screwing my design.

Answer 1

Here’s a jsfiddle that solves your problem. I’m absolutely positioning the label element, then relatively positioning the field element, which puts it slightly higher in the stacking order. Set the field background to transparent, and add some jQuery to listen for focus events. Bam.

(edit: oops, I didn’t keep the focus effect when you enter stuff into the field)