物化 - 禁用表單樣式

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）