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}

问题在于输入（和文本区域）元素具有广泛的材料设计样式，包括输入下方的线条。在其他情况下，它看起来非常整洁，但在卡片内部完全没有必要。

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

或者也许有其他解决方案，如何在卡片上进行双击编辑，而不涉及先前已经过样式化的元素的重复使用？

附注：我在Meteor中运行它，并且有Jade预处理器。然而，这些事实既不应影响问题，也不应影响答案。

- Martins Untals

Answer 1

只需在你的元素中添加class属性：browser-default。

- wahmal

Answer 2

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

- Abdes

Answer 3

如果双击不是必要的功能，您可以通过删除双击和文本区域来进行优化，只留下带有添加属性contentEditable="true"的<p>标签。同时使用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) {...}

附言：在本地测试时发现Chrome有奇怪的问题：输入时会出现额外的div - 请确保考虑到这一点。

- kaaposc

Answer 4

如果你想从任何元素中删除预定义的样式，可以将覆盖写入属性中

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

或使用CSS覆盖

#element {
    border: none;
}

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

#element {
    border: none !important;
}

- krivar

---

但是我该如何删除Materialize自动添加到输入和文本区域元素下方的条形线以及顶部添加的标题？ - Martins Untals

应该列出所有可能的CSS属性以确保它们被移除吗？ - Martins Untals

是的，如果你想要移除 CSS 元素，你需要先找出是什么原因导致了这个效果，然后明确地将其移除。 - krivar