Materialize

Question

是否可以更改默认的实体化表单样式？例如从焦点输入中删除下划线。

Answer 1

覆盖 CSS 样式很容易：您创建自定义 CSS 样式sheet 并在实现 [=23] 之后包含该样式=]风格sheet。然后你找出Materialise设置的规则，并覆盖它们。

例如，输入字段下方的边框由 MaterializeCSS 设计为如下样式：

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    border-radius: 0;
    outline: none;
    height: 3rem;
    width: 100%;
    font-size: 1rem;
    margin: 0 0 20px 0;
    padding: 0;
    box-shadow: none;
    box-sizing: content-box;
    transition: all 0.3s;
}

要删除 border-bottom，请在您的自定义 CSS sheet 中设置此规则：

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
    border-bottom: none;
}

禁用 JS 功能更难，您必须为此更改 JS 源代码并删除您不喜欢的功能。

Answer 2

当您使用 Sass 时，您可以在实现 css 实现后导入一个新的 scss 文件 (http://materializecss.com/getting-started.html)

这可以使用 NPM 或 Bower。还有一个RailsGem(https://github.com/mkhairi/materialize-sass)

Answer 3

Materialize 还允许您添加浏览器默认 class 如果您想要的只是简单的 html 输入

Materialize - 禁用表单样式

Materialize - disable form styling

css