title: how to achieve following using css ( digits input )
body: <p>I am trying to achieve following feature:</p>
  
  <p><img src="https://i.stack.imgur.com/gJ1lb.jpg" alt="enter image description here"></p>
  
  <p>It's an input box, has 4 digits, once clicked, user can input 4 digits.
  It's part of a mobile app.</p>
  
  <p>Currently what I have achieved is : <a href="http://jsfiddle.net/8PTp5/" rel="nofollow noreferrer">example</a>, note that for some reason, 
  <code>outline: none;</code> works fine in my app but not work in this jsFiddle example.</p>
  
  <p>My question is how to draw the 3 separation bar and also display those digits 
  just fit their position within it?</p>
  
  <p>Is it achievable using css?</p>
  
  <p>below are code:</p>
  
  <pre><code>&lt;form id="login" class="ui-shadow-around ui-corner-all-input" data-enhance="false"&gt;
      &lt;div data-role="fieldcontain"&gt;
          &lt;span&gt;
              &lt;input type="tel" name="retailer_pin" maxlength="4" class="numbersOnly" required="" placeholder="" style="outline: none;"&gt;
          &lt;/span&gt;
      &lt;/div&gt;
      &lt;input type="submit" class="submitHidden"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.ui-corner-all-input {
      -webkit-background-clip: padding;
      background-clip: padding-box;
      -webkit-border-radius: .6em /*{global-radii-blocks}*/;
      border-radius: .6em /*{global-radii-blocks}*/;
      width: 35%;height: 3.5em; margin: 0 auto; margin-bottom: 44px;
      margin-top: 24px; 
  }
  .ui-shadow-around {
      -moz-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
      -webkit-box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
      box-shadow: 0px 0px 4px /*{global-box-shadow-size}*/ rgba(0,0,0,0.4) /*{global-box-shadow-color}*/;
      border: 1px #b6b6b6 solid;
  }
  *:not(input):not(textarea) {
      -webkit-user-select: none;
      -webkit-touch-callout: none;
  }
  FORM[data-enhance="false"] INPUT, textarea {
      outline: none;
  }
  FORM[data-enhance="false"] SPAN {
      overflow: hidden;
      display: block;
      padding: 0 10px 0 0px;
      text-align: left;
  }
  .submitHidden {
      visiblity: hidden;
      position: absolute;
      opacity: 0;
  }
  </code></pre>