title: Bootstrap Select not appearing correctly in Chrome
body: <p>I have a form in a ASP.NET MVC project using bootstrap that makes use of several select elements using the Razor helper:</p>
  
  <pre><code>@Html.DropDownListFor(m =&gt; m.project_type, project_type_items, new { @class = "form-control" })
  </code></pre>
  
  <p>Which creates the element:</p>
  
  <pre><code>&lt;select id="project_type" class="form-control"&gt;
  </code></pre>
  
  <p>This works just fine in IE and Firefox but viewed in Chrome, the arrow on the drop down list is missing so that the element appears to be a text input. Clicking on the element will still display the select menu however. </p>
  
  <p>In researching this I did not find info regarding this issue in Chrome, however I did stumble across a similar issue regarding the default Android browser:
  <a href="http://getbootstrap.com/getting-started/" rel="nofollow noreferrer">http://getbootstrap.com/getting-started/</a>
  and <a href="https://stackoverflow.com/questions/14738203/phonegap-build-webkit-appearance-no-drop-down-arrow-for-select-tag">PhoneGap build webkit-appearance no drop down arrow for select tag</a> </p>
  
  <p>My question is: why are these selects not rendering correctly in Chrome and is there a work around for this?</p>
  
  <p>Thanks!</p>