Materialize.css remove styling from input element

Question

I want to make Materialize.css cards editable on doubleclick. To do that I place input within card div, instead of p.

div.row
each cards
  div.col.m4.s12
    div.card.teal
      div.card-content.white-text
        if openCard
          //input(type='text' value='#{text}')              
          textarea.materialize-textarea #{text}
        else                   
          p #{text}

problem is that input (and textarea) elements have extensive material design styling, including line underneath the input. In other occasions it looks very neat, but inside the card it is completely unnecessary.

Is there a way how to remove styling from input element, so it would be usable in such double-click edit mode?

Or maybe there are other solutions, how to do edit with double-click on card, that would not involve reuse of previously styled elements?

p.s. I run it within Meteor, and there is Jade preprocessor. However, those facts should not affect neither the question, nor answer.

score 5 · Answer 1 · answered Jul 12 '17 at 14:53

5

just add class :browser-default to your element

answered Jul 12 '17 at 14:53

wahmal

809
11
27

score 0 · Accepted Answer · edited May 23 '17 at 12:25

If double-click isn't essential for other functionality, you can optimize by dropping both double-click and textarea leaving just <p> with added attribute contentEditable="true". Also use onBlur event listener to save edited text.

So in jade file you would have this:

div.row
each cards
  div.col.m4.s12
    div.card.teal
      div.card-content.white-text
        p(contentEditable="true") #{text}

And in template events this:

'blur .card-content p': function(event) {...}

P.S. While testing locally found out weird issue with chrome: additional div on enter - be sure to take it in account.

score 0 · Answer 3 · answered May 19 '15 at 08:03

0

If you want to remove predefined styling from any element either add the overwrite into the attributes

<div style="border:none;"></div>

or overwrite using CSS

#element {
    border: none;
}

if CSS overwrite doesn't automatically work use !important.

#element {
    border: none !important;
}

answered May 19 '15 at 08:03

krivar

342
1
3
16

but how do I remove things like line under the entry that is automatically added under input and textarea elements by materialize, and title that is added on top? – Martins Untals May 19 '15 at 09:33
and should all the possible css properties be listed to make sure thy are removed? – Martins Untals May 19 '15 at 09:33
yes, if you want to remove CSS elements you need to find out what is causing the efect first and then explicitly remove it. – krivar May 20 '15 at 11:32

score 0 · Answer 4 · answered Sep 21 '17 at 20:41

With this code you can remove MaterializeCSS:

<style type="text/css">

  .MyDiv input[type=text]:not(.browser-default){
    padding: 1% 6%;
     box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
    height: 33px;
}

.MyDiv input[type=text]:not(.browser-default):focus:not([readonly]){
           -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
</style>


<div class="MyDiv">
    <input type="text" name="username">
</div>

Materialize.css remove styling from input element

4 Answers4

Linked