title: Text indent inconsistent for text input and select list on different devices
body: <p>I have a simple text input and a select list. I'm styling them in a similar way and I need them to have the same text-indent. </p>
  
  <p>If I set the text indent to a px value then they both indent the same amount on my iPhone, however they are different in Chrome. Is there a way of standardizing this cross device and browser? </p>
  
  <p><a href="http://codepen.io/anon/pen/pnvqJ" rel="nofollow noreferrer">http://codepen.io/anon/pen/pnvqJ</a></p>
  
  <pre><code>&lt;input placeholder="Last name" type="text" maxlength="25" name="last_name"  size="60" value="" &gt;
  &lt;select name="title"&gt;
  &lt;option&gt;1&lt;/option&gt;&lt;option&gt;2&lt;/option&gt;&lt;option&gt;3&lt;/option&gt;&lt;option&gt;4&lt;/option&gt;&lt;option&gt;5&lt;/option&gt;&lt;/select&gt;
  
  *, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
   }
  
  body {
    padding: 0;
    margin: 0;
  }
  
  input, select {
    display: block;
    border: none;
    text-indent: 10px;
    width: 100%;
    background: grey;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/uL2qX.jpg" alt="enter image description here"></p>