Materialize: Not possible to disable materialize effect for forms

[jonathanpath]

I use the jquery-tag-editor plugin, and I would like that the materalize js dont affect this form, but i'ts not possible?

I also want to have an other style of forms in some cases.

Why not add the JS and the CSS on a .form-control class like bootstrap do ?

[MoonlightMultimedia]

+1

[schorsch]

+1

[trostli]

+1

[chrisco23]

anybody ever find a way to do this? Kinda a showstopper for me at the moment.

[jonathanpath]

@chrisco23 I just added CSS rules to remove the effects by default

[chrisco23]

@jonathanpath interesting. In Chrome Dev Tools I tried disabling all the existing CSS rules but that didn't work for me. However I've since moved on and just dropped the jquery plugin I was trying to use and switched over to gibson:meteor-autonumeric anyway so I think that will work for me.

I'd still be interested to know more about the rules you added though in case I want to use a jquery plugin in the future.

[jonathanpath]

@chrisco23 sorry, I did it on a project 1 year ago and finaly we didn't use material and the branch I use was deleted and now the project doesn't exist anymore - so I can't help you - good luck!

[MoonlightMultimedia]

A full year later and this is still an issue.

[oskarharant]

But you can overwrite css. For instance like this. And, of course, include that after the materialize CSS stylesheet:

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-bottom: none;
border-radius: 0;
outline: none;
height: 3rem;
width: 100%;
font-size: 1rem;
margin: 0 0 15px 0;
padding: 0;
box-shadow: none;
box-sizing: content-box;
transition: all 0.3s;
}

input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime]:focus:not([readonly]),
input[type=datetime-local]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
/_border-bottom: 1px solid #f00;
box-shadow: 0 1px 0 0 #f00;_/
border-bottom: none;
box-shadow: none;
}

[ayoung4]

If you wish, you can stop the form styling from being imported by editing /sass/materialize.scss.

[fega]

It doesn't seem to be a problem with the project itself that if working as expected.

@ayoung4 and @oskarharant points some viable solutions, and, also you could create a "reset class" if you want to use the default materialize style in other parts of your project.

[DevelAx]

Why not add

 .materialize { 
    // materialize styles 
}

to all materialize *.scss for convenience? It's much easier to exclude some part of HTML from .materialize class than adding bulky reset styles.

[didinkaj]

simply add class "browser-default"

https://materializecss.com/helpers.html#browser-default

[syberknight]

@oskarharant
curious: what's the "input:not([type])" for? why use that?

[7ajcc]

perfect solution
"browser-default"
https://materializecss.com/helpers.html#browser-default