title: HTML <Select> is taller than other controls of same designated height
body: <p>I have a problem where the height of my text field and the height of my select box are not the same, when they should be.<br>
  Here's what I have:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;ul class="flex-container"&gt;
  
          &lt;li class="flex-item"&gt;
              &lt;select id="idType"&gt;
                  &lt;option value="1"&gt;1&lt;/option&gt;
                  &lt;option value="2"&gt;2&lt;/option&gt;
                  &lt;option value="3"&gt;3&lt;/option&gt;
                  &lt;option value="4"&gt;4&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type="text" id="idField" class="basicInput" placeholder="  Number"/&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code> #idType, #idField{
      width:35%
  }
  
  select {
      -webkit-appearance: menulist-button;
      height: 3vh;
      color: #969696;
  
  }
  
  .basicInput{
      height: 3vh;
  }
  
  .flex-container {
        list-style: none;
  }
  </code></pre>
  
  <p>You can see what I mean <a href="https://jsfiddle.net/gx4jqpk7/1/" rel="nofollow">Here</a></p>
  
  <p>The height should be the same, 3vh, but it's slighter tall on the select.<br>
  Anyone know how to fix that :)?</p>
  
  <pre><code>    box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
  </code></pre>
  
  <p>These seem to do the trick, thanks everyone!: )</p>