I’ve been working on a pen (http://codepen.io/koenigsegg1/pen/adbzLQ) that is just an input field. When active, the label moves out of the way to let you type your name. This works well on a desktop/laptop environment, but when viewed on iOS (and maybe Android too, I don’t know) it doesn’t work properly. Safari, Chrome, Opera Mini, and most other browsers don’t activate the :active pseudo-class, and thus the label stays in the way.
Is there any way around this? Some suggest adding a bit of JavaScript code like this to your page document.addEventListener("touchstart", function() {},false); , but so far this hasn’t worked for me. The only mobile browsers (that I tested) that it seems to work on, is: Firefox, 1Password, and Puffin.
