CSS : Remove box surrounding caret in Firefox

Question

I have the following select dropdown:

<div class="form-group">
    <label for="diagnosticMode" class="control-label col-xs-2">Policy Organisation:</label>
    <select id="DD1" name="PolicyOrganisation" class="btn btn-default">
        <option value="-1">Select</option>
        @foreach (var item in ViewBag.PolicyOrgs)
        {
            <option value="@item.Id">@item.Name</option>
        }
    </select>
</div>

When viewed in Google Chrome it displays as expected, but when viewed in Firefox the drop down box down arrow (caret i believe its called) is surrounded by a small box.

How can i remove this in CSS so it shows just a plain button with the caret?

For those that may find this thread looking to remove the arrow look here: remove default select box arrow in firefox

Answer 1

    select{
        width: 200px !important;
        border: 1px solid gray ! important;
        outline : medium none !important;
        display: inline-flex !important;
        height: 25px !important;
        vertical-align: top;
        -webkit-appearance: none;
    }
    select::-ms-expand {
        display: none;
    }

<div class="form-group">
    <label for="diagnosticMode" class="control-label col-xs-2">Policy Organisation:</label>
    <select id="DD1" name="PolicyOrganisation" class="btn btn-default">
        <option value="-1">Select</option>
        @foreach (var item in ViewBag.PolicyOrgs)
        {
            <option value="@item.Id">@item.Name</option>
        }
    </select>
</div>

jsfiddle