CSS: Create iOS style Pin Password box

Question

I want to create a html5 input that looks like the iOS enter Pin (on the lock screen).... with 4 input boxes.

How do i achieve this?

Answer 1

Instead of images, have 4 input boxes. Fiddle here: http://jsfiddle.net/JLyn9/2/

moveOnMax =function (field, nextFieldID) {
    if (field.value.length == 1) {
        document.getElementById(nextFieldID).focus();
    }
}

PS the JS function can be optimized.

EDIT/WARNING: This is not a solution to this problem. Please look at the other answers