Materialize select input shows two carets

Question

I've just integrated Materialize into my Rails project through the gem 'materialize-sass'. For some reason, the select inputs are showing two carets instead of 1.

The code for the select input is basically a fork of the example on their website.

<div class="input-field">
    <select name="tutor_profile[dob_month]" id="tutor_profile_dob_month">
        <option value="" disabled selected>Choose your month</option>
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <label>Birthday</label>
</div>

I've tried tweaking the CSS styling for the select button in the Developers Console with no success. There are no additional stylings to any of the elements within the select input.

Other CSS frameworks I'm using are bootstrap, bootstrap-tagsinput, twitter-typeahead, and jquery-ui. I was wondering if anyone has experience something similar.

Answer 1

Short answer:

Add this to your css

.caret {
  border-color: transparent !important;
}

Long answer:

Bootstrap implements the caret using css borders (right, top, left), and materializecss implements the caret using the text "▼" as the inner html of the element.

Forcing a transparent border will cause bootstrap's caret to disappear, and will solve your problem.

If you insist on using bootstrap's caret, you will have to edit materializecss's javascript files, which is not recommended.