Materialize - Form-Styling deaktivieren

Question

Ist es möglich, das Standard-Form-Styling zu ändern? Entfernen Sie zum Beispiel die Unterstreichung von der fokussierten Eingabe.

materialize framework link

Answer 1

die CSS-Stile Überschreibung ist einfach: Sie erstellen einen benutzerdefinierte CSS-Stylesheet und beinhalten, dass nach der materialisieren CSS-Stylesheet. Dann erfahren Sie, welche Regeln von Materialise festgelegt wurden, und überschreiben sie.

Zum Beispiel ist die Grenze unterhalb der Eingabefelder werden durch MaterializeCSS wie dieser Stil:

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; 
} 

Um die border-bottom zu entfernen, in der benutzerdefinierten CSS Blatt setzen Sie diese Regel:

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; 
} 

Deaktivieren der JS-Funktionen ist schwieriger, müssten Sie den Quell-JS-Code dafür ändern und Funktionen entfernen, die Sie nicht mögen.

Answer 2

Wenn Sie Sass verwenden, können Sie eine neue SCSS Datei nach der Materialise CSS-Implementierung importieren (http://materializecss.com/getting-started.html)

Dies kann mit NPM oder Bower. Es gibt auch einen Rails Gem (https://github.com/mkhairi/materialize-sass)