Petr Petr - 4 months ago 170
CSS Question

Materialize - disable form styling

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

materialize framework link

Answer

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.

Comments