Materialize选择输入框显示两个尖角符号

Question

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

- Richard

Answer 1

简短回答：

将以下内容添加到你的CSS中

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

长答案：

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

强制使用透明边框将导致bootstrap的插入符号消失，并解决您的问题。

如果您坚持使用bootstrap的插入符号，则必须编辑materializecss的javascript文件，这是不推荐的。

- Ofer Segev

Answer 2

我有完全相同的问题。 原因是我们同时使用了bootstrap和materializecss，如果卸载其中一个，就可以正常工作。 但是让它们一起工作的解决方案，我不知道怎么做 =(

- user3711881

---

很遗憾两者不兼容，因为将所有样式从Bootstrap修改为Materialize将会很繁琐。 - Richard

Answer 3

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

- Carlos Melgoza Gutiérrez

---

在一个<span class="caret"></span>中。 - Carlos Melgoza Gutiérrez

如果您没有使用更多的内容，比如下拉框，那么您只能使用该行。 - Carlos Melgoza Gutiérrez

Answer 4

在执行 material_select 之前，先删除具有“caret”类的先前 span，这将重新启动 materializecss 中的 select 标签：

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

- Igor Bezerra