title: Input with type=number but add alphabetical suffix
body: <p>I have <code>&lt;input type="number"&gt;&lt;/input&gt;</code>. I like the fact that it has <code>type="number"</code> since I want numeric input from the user. I would rather not change its type away from number. However, I would like to display the units after the number. So I want the input to read "5 px" if the unit is in pixels. I want the user to be able to edit the 5 part, but not the px part. The solution found <a href="https://stackoverflow.com/a/2913366/3470632">here</a> will not work unless I do more gimmicks and make it hackier, because the "px" would come after the up/down arrows in chrome. These are the arrows I'm talking about![example of arrows][1] </p>
  
  <p>On my environment in chrome, you can just put alphabetical characters in the <code>&lt;input ...&gt;</code>, but this is <a href="https://stackoverflow.com/a/30769612/3470632">technically not legal</a></p>
  
  <p>I need a solution that works on firefox, chrome, safari, and IE9.</p>