title: How to properly resize select form input
body: <p>I have a form which uses both text fields as well as <code>select</code> options. I styled the form using the following CSS:</p>
  
  <pre><code>input[type=text] {
      width: 250px;
      height: 30px;
      text-indent: 10px;
      border-width: 3px;
      border-color: rgba(50, 50, 50, 0.14);
      margin: 10px 10px 10px 0px;
      padding: 5px 5px 5px 5px;
  }
  
  select {
      width: 250px;
      height: 30px;
      border-width: 3px;
      border-color: rgba(50, 50, 50, 0.14);
      margin: 10px 10px 10px 0px;
  }
  </code></pre>
  
  <p>The problem is that for some reason, the <code>select</code> options are not properly using the <code>width</code> and <code>height</code>. The actual select box is rather small is comparison to the text fields. They end up like:</p>
  
  <p><img src="https://i.stack.imgur.com/LqtWS.png" alt="enter image description here"></p>
  
  <p>How can I properly resize a <code>select</code> option using CSS to make it have the same size as text fields? I tried using the <code>width</code> and <code>height</code> as shown above, but this does not give me the desired effect.</p>