Bootstrap Select not appearing correctly in Chrome

Question

I have a form in a ASP.NET MVC project using bootstrap that makes use of several select elements using the Razor helper:

@Html.DropDownListFor(m => m.project_type, project_type_items, new { @class = "form-control" })

Which creates the element:

<select id="project_type" class="form-control">

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.

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: http://getbootstrap.com/getting-started/ and PhoneGap build webkit-appearance no drop down arrow for select tag

My question is: why are these selects not rendering correctly in Chrome and is there a work around for this?

Thanks!

Solution

Found a solution without requiring a workaround. This was perhaps silly; I am using a bootstrap theme from bootswatch in which the css for select had -webkit-appearance: none

The following edit solved the issue in Chrome (and presumably Safari):

select.form-control {
    -webkit-appearance: menulist;
}

as per W3