Question

我想在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}

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

有没有办法从输入元素中删除样式，所以它可以在这种双击编辑模式下使用？

或许还有其他解决方案，如何通过双击卡进行编辑，这不会涉及重复使用以前设置的元素？

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

Answer 1

只需将class browser-default添加到您的元素

即可

Answer 2

如果双击对于其他功能不是必不可少的，您可以通过删除双击和textarea进行优化，只留下＆lt; p＆gt;添加了属性contentEditable =＆＃34; true＆＃34;。还可以使用onBlur事件侦听器来保存已编辑的文本。

所以在jade文件中你会有这个：

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

在模板事件中：

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

P.S。在本地测试时发现了Chrome的奇怪问题：additional div on enter - 请务必将其考虑在内。

Answer 3

如果要从任何元素中删除预定义样式，请将覆盖添加到属性

中

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

或使用CSS覆盖

#element {
    border: none;
}

如果CSS覆盖没有自动使用！重要。

#element {
    border: none !important;
}

Answer 4

使用此代码，您可以删除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>

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

4 个答案: