title: Mobile Forms Select is not the same size as Input or textarea
body: <p>I have a mobile page including a form. I need to align the select and input/textarea and make them the same size but it's not working properly. (see image)</p>
  
  <p><img src="https://i.stack.imgur.com/7misI.png" alt="enter image description here"></p>
  
  <p>As you can see in the screenshot, the dropdown is not the same size as the input or textarea. Here's my code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
  "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"&gt;
  &lt;html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /&gt;
  &lt;/head&gt;
  
  &lt;style type="text/css"&gt;
  
    select, input, textarea {
      border: solid 0.1em black;
      font: normal 1.5em Arial;
      margin: 0.3em 0;
      padding: 0.2em;
    }
  
    .em { width: 11em; }
    .px { width: 150px; }
    .percent { width: 50%; }
  
  &lt;/style&gt;
  
  &lt;select name="option1" class="em"&gt;
    &lt;option value="" selected=""&gt;= choose =&lt;/option&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;/select&gt;
  &lt;input name="input" type="text" value="" class="em" /&gt;
  &lt;textarea class="em"&gt;&lt;/textarea&gt;
  
  &lt;hr /&gt;
  
  &lt;select name="option1" class="px"&gt;
    &lt;option value="" selected=""&gt;= choose =&lt;/option&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;/select&gt;
  &lt;input name="input" type="text" value="" class="px" /&gt;
  &lt;textarea class="px"&gt;&lt;/textarea&gt;
  
  &lt;hr /&gt;
  
  &lt;select name="option1" class="percent"&gt;
    &lt;option value="" selected=""&gt;= choose =&lt;/option&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;/select&gt;
  &lt;input name="input" type="text" value="" class="percent" /&gt;
  &lt;textarea class="percent"&gt;&lt;/textarea&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What am I doing wrong or what should I do?</p>