如何取消Flask-WTForms提交按钮文本装饰？及Materialize样式适配问题

Hey there! Let's work through your Flask-WTForms issues with Materialize step by step.

First off, Flask-WTF's SubmitField renders as an <input type="submit"> by default—browsers don't add text decoration (like underlines) to this element out of the box. If you're seeing decoration, it's likely from global CSS rules or Materialize's styles bleeding over. Here are two easy fixes:

• Quick inline style fix (great for testing):

  {{ form.submit(class="your-classes-here", style="text-decoration: none;") }}
  

• Cleaner CSS class approach:
  Add this to your stylesheet:

  .no-text-decoration {
    text-decoration: none !important;
  }
  

  Then attach it when rendering the field:

  {{ form.submit(class="btn waves-effect waves-light no-text-decoration") }}
  

  The !important ensures it overrides any conflicting styles from Materialize or your own CSS.

The core issue here is that Flask-WTF's SubmitField outputs an <input type="submit">, but Materialize's .btn classes are built for <button> elements. This mismatch causes the weird click area, blue focus border, and text color issues. Here's the best fix:

将SubmitField渲染为<button>而非<input> #

Flask-WTForms允许你绕过默认的输入渲染，改用button标签，这能完美适配Materialize的样式。在模板里这样写：

<button class="btn waves-effect waves-light" type="submit" name="action">
  {{ form.submit.label.text }}
</button>

这完全复刻了你参考的原生Materialize按钮结构。

为什么这能解决问题： #

• 受限的点击区域：<input>元素仅响应内容范围内的点击，而<button>会使用Materialize样式定义的完整填充容器，切换后点击区域立刻恢复正常。
• 蓝色边框：这是浏览器对输入框的默认聚焦轮廓线。Materialize已经为按钮做好了聚焦样式适配，改用<button>后会自动替换为Materialize的预期样式。如果想完全移除它，可以添加这段CSS：

  .btn:focus {
    outline: none !important;
    box-shadow: none !important;
  }
  

• 黑色文字颜色：Materialize的.btn类默认将文字设为白色，但这个规则对<input>元素的优先级不够。改用<button>后会自动继承白色文字，也可以手动强制设置：

  .btn {
    color: white !important;
  }
  

备选方案（不推荐）：为<input>补全样式 #

如果你坚持要用默认的<input>渲染，需要手动为输入框补全Materialize按钮的样式：

input[type="submit"].btn {
  border: none;
  padding: 0 2rem;
  line-height: 36px;
  text-align: center;
  color: white !important;
  cursor: pointer;
}

input[type="submit"].btn:focus {
  outline: none;
  box-shadow: none;
}

但这种方法需要不断调整以匹配Materialize的更新，远不如改用<button>的方式省心。

内容的提问来源于stack exchange，提问作者Cratuss