Materialize.css 从输入元素中删除样式

Question

我想使 Materialize.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}

问题在于输入（和文本区域）元素具有广泛的 material 设计样式，包括输入下方的线条。在其他场合看起来很整洁，但在卡里面就完全没有必要了。

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

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

p.s。我运行它在 Meteor 中，并且有 Jade 预处理器。但是，这些事实不应影响问题或答案。

Answer 1

如果双击对于其他功能来说不是必需的，您可以通过删除双击和文本区域来优化，只留下具有添加属性 contentEditable="true" 的

。还使用 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 2

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

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

或使用CSS

覆盖

#element {
    border: none;
}

如果 CSS 覆盖不会自动生效，请使用 !important。

#element {
    border: none !important;
}

Answer 3

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

Answer 4

使用此代码，您可以删除 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 从输入元素中删除样式

Materialize.css remove styling from input element

javascript

css

materialize