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 using background-image for this purpose, use four input boxes with their type set to password, and than use jQuery to achieve some more user friendliness, if you don't need that functionality of auto focusing to next field you can simply omit the script out and achieve your style..

Demo

input[type=password] {
    padding: 10px;
    border: 1px solid #ffffd;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}

jQuery (Optional for auto focus functionality)

$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});