物化 - 禁用表单样式

Question

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

materialize framework link

Answer 1

改写CSS样式很简单：创建一个自定义的CSS样式表，并包括的Materialise的CSS样式表后。然后你会发现Materialize设置了哪些规则，并覆盖它们。

例如，下面的输入域的边界，是由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表将此规则设置：

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功能比较困难，您必须更改源代码并删除不喜欢的功能。

Answer 2

当您使用萨斯可以在Materialise的CSS实现（http://materializecss.com/getting-started.html）

这可以通过NPM或鲍尔后导入新SCSS文件。还有一个Rails Gem（https://github.com/mkhairi/materialize-sass）