Jumping input fields in Safari

Question

I\'m trying to recreate a pretty cool placeholder UI using only HTML and CSS, and I\'ve almost got it (demo). However, if you type something in an input field and tab to focus o

Answer 1

I responded to you on Twitter, but I'll also post a link here: This can be done with input + label as opposed to input + placeholder. http://codepen.io/jordanoaragao/pen/teqFw

It's been implemented here: http://womensenterprisecenter.com/

Answer 2

It seems that the placeholder-attribute cannot be animated. So I made a little fake-placeholder and animated this. Unfortunately, if you only use CSS, the animation will go off, if you leave the input. So I added a little bit of JS-magic to trigger the animation.

Answer 3

Adding this to your input and textarea element solves the problem:

float: left;

Tested on Safari Version 6.0.5 (8536.30.1) and Mobile Safari