Materialize.css从input元素中删除样式

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

我想在doubleclick上使Materialise.css卡可编辑。为此,我将输入放在卡片div中,而不是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.

问题是输入(和textarea)元素具有广泛的材料设计样式,包括输入下面的线。在其他场合它看起来非常整洁,但在卡内部完全没有必要。

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.

附:我在Meteor中运行它,并且有Jade预处理器。但是,这些事实既不会影响问题,也不会影响答案。

4 个解决方案

#1

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.

如果双击对于其他功能不是必不可少的,您可以通过删除双击和textarea来优化,只留下

添加属性contentEditable =“true”。还可以使用onBlur事件侦听器来保存已编辑的文本。

So in jade file you would have this:

所以在jade文件中你会有这样的:

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.

附:虽然在本地测试发现了Chrome的奇怪问题:输入的额外div - 一定要考虑到它。

#2

just add class :browser-default to your element

只需在您的元素中添加class:browser-default即可

#3

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

或使用CSS覆盖

#element {
    border: none;
}

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

如果CSS覆盖不自动使用!重要。

#element {
    border: none !important;
}

#4

With this code you can remove MaterializeCSS:

使用此代码,您可以删除MaterialiseCSS:

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

#1