python - Flask WTforms 中的 CSS 适用于按钮，但不适用于其他按钮

Question

{% extends "layout.html"%}
{%block contents%}
<form method="POST" action="">
    {{form.hidden_tag()}}
        <div class="container">
            {{form.username.label(class_="label-txt")}}
            {{form.username(class_="label")}}
        </div>
        {{form.submit(class_="btn")}}
{%endblock contents%}

上面的注册页面有带有 css 的提交按钮，它工作正常但对于用户名字段它不起作用。如果我为用户名传递相同的类，它正在工作。非常困惑，没有 CSS 适用于这些字段。

CSS:

.btn {
  display: inline-block;
  padding: 12px 24px;
  background: rgb(220,220,220);
  font-weight: bold;
  color: rgb(120,120,120);
  border: none;
  outline: none;
  border-radius: 3px;
  cursor: pointer;
  transition: ease .3s;
}

.btn:hover {
  background: #8BC34A;
  color: #ffffff;
}
.label-txt {
  position: absolute;
  top: -1.6em;
  padding: 10px;
  font-family: sans-serif;
  font-size: .8em;
  letter-spacing: 1px;
  color: rgb(120,120,120);
  transition: ease .3s;
}
.label {
  display: block;
  position: relative;
  margin: 40px 0px;
}
.input {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  outline: none;
}

Answer 1

看起来你做的一切都是对的。唯一导致问题的是标签-txt 上的 css。只需取出 position: absolute 即可查看。

假设您已在 layout.html 上正确链接了 css 文件url_for('static', filename='main.css')，你可以通过检查标签看到你添加的类