How can I create an iOS style PIN/password box with CSS?

Issue

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?

I tried the following:

1) Created a normal input box.

2) Removed its borders.

3) Placed the above image as the background of the input box.

4) And added some letter spacing.

Problem is: As i type the first 3 characters, it fits in the boxes:

But when i type the 4th character, the characters move towards the left and hence it appears as below:

What can I do to fix this ?

Any other better approach ??

EDIT:

Ok based on the below answers, I modified the approach to have 4 input boxes. And on keyup event for each input box, I change the focus to next input box.

This works well on browser. But does not work on the device (iPhone 5). What is the problem ?

It is a Sencha Touch app packaged using Cordova.

SOLVED:

Need to disable <preference name="KeyboardDisplayRequiresUserAction" value="false" />

Solution

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

<input type="password" maxlength=1 id="1" onkeyup="moveOnMax(this,'a')" />
<input type="password" maxlength=1 id="a" onkeyup="moveOnMax(this,'b')" />
<input type="password" maxlength=1 id="b" onkeyup="moveOnMax(this,'c')" />
<input type="password" maxlength=1 id="c" />

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

Answered By - stackErr