title: How can I create an iOS style PIN/password box with CSS?
body: <p>I want to create a html5 input that looks like the iOS enter Pin (on the lock screen).... with 4 input boxes.</p>
  
  <p>How do i achieve this?</p>
  
  <p><img src="https://i.stack.imgur.com/20L07.png" alt="enter image description here"></p>
  
  <p><strong>I tried the following:</strong></p>
  
  <p>1) Created a normal input box. </p>
  
  <p>2) Removed its borders.</p>
  
  <p>3) Placed the above image as the background of the input box.</p>
  
  <p>4) And added some letter spacing.</p>
  
  <p>Problem is: As i type the first 3 characters, it fits in the boxes:</p>
  
  <p><img src="https://i.stack.imgur.com/CKIT9.png" alt="enter image description here"></p>
  
  <p>But when i type the 4th character, the characters move towards the left and hence it appears as below:</p>
  
  <p><img src="https://i.stack.imgur.com/kSCTq.png" alt="enter image description here"></p>
  
  <p>What can I do to fix this ?</p>
  
  <p>Any other better approach ??</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Ok based on the below answers, I modified the approach to have 4 input boxes. And on <strong>keyup</strong> event for each input box, I change the <strong>focus</strong> to next input box. </p>
  
  <p>This works well on browser. But does not work on the device (iPhone 5). What is the problem ?</p>
  
  <p>It is a Sencha Touch app packaged using Cordova.</p>
  
  <p><strong>SOLVED:</strong></p>
  
  <p>Need to disable <code>&lt;preference name="KeyboardDisplayRequiresUserAction" value="false" /&gt;</code></p>