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

Question

我刚刚通过gem 'materialize-sass'将Materialize集成到我的Rails项目中。出于某种原因，选择输入显示两个插入符号而不是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文件，这是不推荐的。

Answer 2

我有完全相同的问题。 原因是我们结合bootstrap和materializecss fm，如果你卸载其中一个，工作正常。 但他们的解决方案一起工作，我不知道=（

Answer 3

这不是最好的答案。但我用JQuery做到了这一点。 我读了控制台中生成的html，然后我注意到那些箭头在一个$(".caret").hide()试试这个！

Answer 4

在执行material_select之前，使用“插入符”类删除上一个跨度， 这将重新启动materializecss中的select标签：

$(".caret").remove();
$('select').material_select();