Materialize - disable form styling

Question

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

materialize framework link

Answer 1

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.

Answer 2

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)