title: HTML input field right padding
body: <p>I have an input box that I want to be tight to the value string within.  As such, I have the input field resized on each input event, e.g.:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input value=1 size=1 oninput='this.size=this.value.length'&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works with the exception that both Chrome and Firefox (shown below respectively) leave additional padding on the right within the input field. Firefox being the worst.  </p>
  
  <p><a href="https://i.stack.imgur.com/ejjTo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ejjTo.png" alt="Google-chrome"></a> <a href="https://i.stack.imgur.com/YWkBP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YWkBP.png" alt="Firefox"></a></p>
  
  <p>How can I, thru CSS or inline attribute, get rid of the extra padding on the right WHILE maintaining the auto-expanding expanding feature (vis a vis <code>this.size = this.value.length</code>)?</p>
  
  <p><strong>UPDATE:</strong>  While suggestion below fake-fix the problem, none are proper fixes.  It seems, in this regards, <code>&lt;input&gt;</code> box is unredeemable.  As such, I'm just moving on to using <code>&lt;div contenteditable=true&gt;&lt;/div&gt;</code>.  The outline hugs the textContent tightly.  Fortunately, for my use, compatibility with <code>&lt;form&gt;</code> or autocomplete features are not necessary.</p>