title: bootstrap crossbrowser issues with select control
body: <p>Bootstrap may be having some issues with the way they render their form select control.</p>
  
  <p>Refer to the picture below to see what I mean. </p>
  
  <p>The code couldn't be any simpler, which tells me that the fix may be outside of Bootstrap itself. This is my code</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div class="col-sm-4"&gt;
      &lt;select&gt;
         &lt;option&gt;- Jump To -&lt;/option&gt;
         &lt;option&gt;Option 1&lt;/option&gt;
         &lt;option&gt;Option 2&lt;/option&gt;
         &lt;option&gt;Option 3&lt;/option&gt;
         &lt;option&gt;Option 4&lt;/option&gt;
      &lt;/select&gt;
      &lt;button class="btn btn-green btn-go"&gt;GO&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>select {
     color: lighten(@pss-black, 30%);
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     width: 230px;
     height: 32px;
     padding: 0 34px 0 10px;
     border: 1px solid lighten(@pss-black, 80%);
    -webkit-border-radius: 0;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     font-size: 1em;
     background: @pss-white url('@{img-path}bg_select.png') no-repeat 100% 50%;
     -webkit-appearance: none;
     -moz-appearance: none;
     letter-spacing: normal;
  </code></pre>
  
  <p>}</p>
  
  <p>Anyone knows how to make FF and IE look like Chrome?...If possible, no additional plugins. I am trying to build this with minimal script/images use (mostly pure css in the bootstrap framework)</p>
  
  <p><img src="https://i.stack.imgur.com/9Zr3P.jpg" alt="enter image description here"></p>