title: Styling input password in HTML
body: <p>I have an input type password that only allow a six-digit number like this:</p>
  
  <pre><code>&lt;fieldset&gt;
    &lt;label for="password-input"&gt;Enter New Pin&lt;/label&gt;
    &lt;input type="password" name="password" id="password-input" inputmode="numeric" minlength="6"
    maxlength="6" size="6" value=""&gt;
    &lt;span class="hint"&gt;New pin must be 6 digit number only&lt;/span&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>It will show like this:</p>
  
  <p><a href="https://i.stack.imgur.com/xLIpF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xLIpF.png" alt="Default input appearance"></a></p>
  
  <p>How can I style it so it can look like the following?</p>
  
  <p><a href="https://i.stack.imgur.com/ivbvb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ivbvb.png" alt="Desired input appearance"></a></p>