我目前正在使用Materialize CSS,似乎遇到了 Select 字段的问题.

我使用的是他们网站提供的示例,但不幸的是,它呈现在视图中.我想知道是否有其他人能帮上忙.

我想做的是创建一行,其中有两个提供填充的端部间隔符,然后在内部的两行项目中,应该有一个搜索文本输入和一个搜索 Select 下拉列表.

这是我正在使用的示例:http://materializecss.com/forms.html

提前谢谢你.

下面是有问题的代码片段.

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="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>
        <div class="input-field col s2"></div>
    </div>
</form>

推荐答案

因为它们覆盖了浏览器默认设置,所以 Select 样式需要Javascript才能运行.您需要包含materialized Javascript文件,然后调用

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

在你加载文件之后.

Html相关问答推荐

关于角内按钮范围的混乱

restrict. form—text width to input s width'

UseEffect()从不调用preact

需要帮助实现悬停动画效果

使用无限数量的元素创建特定的CSS网格

如何在用css使用网格视图时设置宽度?

如何使用*ngFor将模板从父级传递到子级

使自定义图像滑块全宽

多次使用组件时计数Angular 14中嵌套数组的指令

当底部进入视图时从底部粘性定位

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

使用简单的 HTML 设计公司徽标和文本

::可点击图标之前

悬停时宽度从 0 过渡到自动

我如何设置括号的样式,使它们不会挂在旁边的其他字符下面

如何在滚动行中显示一张图片和下一张图片的一半?

当我将鼠标悬停在测试类上时,左侧类的 colored颜色 没有改变

我应该如何使这个带有标签的隐藏复选框可访问

使用 TailwindCSS 将徽标放在左上角,将菜单放在右上角

如何使用 css 将图像变成黑色并使文本出现在悬停时?