Question

我正在开发一个需要使用materializecss的项目。

最初我使用bootstrap时可以创建一个可编辑的DropDown / select框。以下是一个示例代码：https://codepen.io/cfmatre/pen/LGOdjq

在物化中，您可以创建一个下拉列表：

<div class="input-field col s12">
    <select multiple>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Multiple Select</label>
</div>

但是这不允许你像引导程序示例那样手动编辑它。

物化是否支持这一点，还是有一种简单的方法可以让它做同样的事情？

更新：它似乎已经用列表替换了标记，这里是实时代码的片段：

    <div class="select-wrapper">
    <span class="caret">▼</span>
        <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-0d9542b7-ca78-df34-51ab-f19edd342ec0" value="Choose your option">
    <ul id="select-options-0d9542b7-ca78-df34-51ab-f19edd342ec0" class="dropdown-content select-dropdown" style="width: 991px; position: absolute; top: 0px; left: 0px; display: none; opacity: 1;">
    <li class="disabled"><span>Choose your option</span></li>
    <li class=""><span>Option 1</span></li>
    <li class=""><span>Option 2</span></li>
    <li class=""><span>Option 3</span></li>
    </ul>
<select data-select-id="0d9542b7-ca78-df34-51ab-f19edd342ec0" class="initialized">
                            <option value="" disabled="" selected="">Choose your option</option>
                            <option value="1">Option 1</option>
                            <option value="2">Option 2</option>
                            <option value="3">Option 3</option>
                        </select></div>

如您所见，它将输入框设置为只读。所以在我的情况下，我需要它仍然可以食用而不是只读，我不知道该怎么做。

Answer 1

您的引导代码使用列表，而materializecss使用选择表单。

选择表单更难，也更复杂。

＆＃34; select元素是操作系统的一部分，而不是浏览器chrome。因此，风格非常不可靠，无论如何都不一定有意义。＆＃34;

要选择样式，请点击以下链接：

How to style a <select> dropdown with CSS only without JavaScript?

Answer 2

选择标签在自定义方面非常有限，它们受浏览器的影响，无论它们的样式如何。

您提供的codepen示例是使用列表并使用jQuery。

在materialise css中可编辑的DropDown

2 个答案: