CODEWITHSUNDEEP
cssmaterialize
Petr
Petr

Reputation: 1219

Materialize - disable form styling

Is possible to change default materialize form styling? For instance remove underline from focused input.

materialize framework link

Upvotes: 7

Views: 8796

Answers (3)

TBK
TBK

Reputation: 466

Materialize also allows you to add a browser-default class if all you want is the simple html input as you say

Upvotes: 0

Wouter Schoofs
Wouter Schoofs

Reputation: 986

When you are using Sass you can import a new scss file after the materialize css implementation (http://materializecss.com/getting-started.html)

This can with NPM or Bower. There is also a Rails Gem (https://github.com/mkhairi/materialize-sass)

Upvotes: 2

Randy
Randy

Reputation: 9819

Overwriting the CSS styles is easy: you create a custom CSS stylesheet and include that after the materialize CSS stylesheet. Then you find out what rules are set by Materialize, and overwrite them.

For example, the border below the input-fields, are styled by MaterializeCSS like this:

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

To remove the border-bottom, in your custom CSS sheet you set this rule:

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

Disabling the JS functions is harder, you would have to change the source JS code for that and remove functions you don't like.

Upvotes: 2

Related Questions