物化选择输入显示两个插入符号

Question

我刚刚将Materialise集成到我的Rails项目中gem 'materialize-sass'.出于某种原因,选择输入显示两个插入符号而不是1.

select输入的代码基本上是他们网站上示例的一个分支.

<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>

我试过调整开发人员控制台中的选择按钮的CSS样式,但没有成功.选择输入中的任何元素都没有其他样式.

我正在使用的其他CSS框架是bootstrap,bootstrap-tagsinput,twitter-typeahead和jquery-ui.我想知道是否有人有类似的经历.

Answer 1

简短回答:

将此添加到您的CSS

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

答案很长:

Bootstrap使用css边框(右,上,左)实现插入符,而materializecss使用文本"▼"作为元素的内部html实现插入符号.

强制透明边框将导致bootstrap的插入消失,并将解决您的问题.

如果你坚持使用bootstrap的插入符号,你将不得不编辑materializecss的javascript文件,这是不推荐的.