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

【问题标题】：Materialize select input shows two carets物化选择输入显示两个插入符号
【发布时间】：2016-01-15 04:46:19
【问题描述】：

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

选择输入的代码基本上是他们网站上示例的一个分支。

<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。我想知道是否有人遇到过类似的事情。

【问题讨论】：

标签： ruby-on-rails materialize

【解决方案1】：

简答：

将此添加到您的 CSS 中

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

长答案：

Bootstrap 使用 css 边框（右、上、左）实现插入符号， materializecss 使用文本“▼”作为元素的内部 html 实现插入符号。

强制透明边框会导致引导程序的插入符号消失，并会解决您的问题。

如果你坚持使用bootstrap的插入符号，你将不得不编辑materializecss的javascript文件，不推荐这样做。

【讨论】：

【解决方案2】：

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

【讨论】：

很遗憾两者不能交叉兼容，因为从引导程序修改所有样式到实现会很痛苦。

【解决方案3】：

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

【讨论】：

合二为一
而且你只能使用那条线，如果你不使用更多的东西，比如 dropdows :(

【解决方案4】：

在执行material_select之前用“caret”类删除之前的span，这将重新启动 materializecss 中的选择标签：

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

【讨论】：