title: Using CSS to make button appear on Select Drop Down menu in Chrome / Webkit Browsers
body: <p>So I have a simple drop down menu in HTML like this:</p>
  
  <pre><code>&lt;select name="menu" class="menu"&gt;
      &lt;option value="a"&gt;A&lt;/option&gt;
      &lt;option value="b"&gt;B&lt;/option&gt;
      &lt;option value="c"&gt;C&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And I am styling it with this CSS:</p>
  
  <pre><code>.menu {
      font-size: 10px;
      font-family: Arial, sans-serif;
      padding-top: 2px;
      position: relative;
      bottom: 2px;
      outline: none;
      border-bottom-width: 1px !important;
      border-top-style: none !important;
      border-right-style: none !important;
      border-bottom-style: solid !important;
      border-left-style: none !important;
      border-bottom-color: #999 !important;
      width:200px;
      -webkit-border:0;
      -webkit-appearance: button;
  }
  </code></pre>
  
  <p>This renders as I want it to in Firefox and Internet Explorer - the drop down menu has a 1px border along the bottom only, and has the drop down menu button (grey button with small down arrow) to the right hand side.</p>
  
  <p>But in Chrome, or other WebKit browsers (like Safari), the button does not appear.</p>
  
  <p>I have been toying around with the <code>-webkit-appearance</code> rule, playing around with the properties found here <a href="http://css-infos.net/property/-webkit-appearance" rel="nofollow">http://css-infos.net/property/-webkit-appearance</a> but with little success.</p>
  
  <ul>
  <li><p>Without this rule the drop down menu renders with a box around it and
  the button on the right hand side.</p></li>
  <li><p>With this rule the drop down menu renders with just the 1px border
  along the bottom, but no button on the right hand side.</p></li>
  </ul>
  
  <p>My question is, how do I get this drop down menu to render in Chrome as it does in Firefox, with the button on the right and just a single 1px border along the bottom?</p>
  
  <p>Here is a jsFiddle so you can see for yourself: <a href="http://jsfiddle.net/tkFpe/3/" rel="nofollow">http://jsfiddle.net/tkFpe/3/</a></p>