如何使用自定义 css 类设置 WTForm 字段的样式？

Question

我创建了一个简单的表单，例如：

class PostForm(FlaskForm):
    # for posting a new blog
    title = StringField("Title", validators=[DataRequired()])
    submit = SubmitField('Post')

我的表单 HTML 如下所示：

<div class="post-project-fields">
    <form method="POST" action="">
        {{ form.hidden_tag() }}
        <div class="row">
            <div class="col-lg-12">
                <!-- <input type="text" name="title" placeholder="Title"> -->
                {{ form.title.label }}
                {{ form.title }}
            </div>
            <div class="col-lg-12">
                <ul>
                    <!-- <li><button class="active" type="submit" value="post">Post</button></li> -->
                    {{ form.submit }}
                    <li><a href="/" title="">Cancel</a></li>
                </ul>
            </div>
        </div>
    </form>
</div><!--post-project-fields end-->

post-project-fields 类的 CSS 样式如下所示：

.post-project-fields {
    float: left;
    width: 100%;
    padding: 30px 20px;
    background-color: #121212;
}
.post-project-fields form {
    float: left;
    width: 100%;
}
.post-project-fields form input {
    padding: 0 15px;
    height: 40px;
}
.post-project-fields form ul li button,
.post-project-fields form ul li a {
    color: #000000;
    font-size: 16px;
    border: 1px solid #e5e5e5;
    padding: 10px 25px;
    display: inline-block;
    background-color: #d7d7d7;
    font-weight: 600;
    cursor: pointer;
}

由于 css 类是这样的，它没有按照我想要的方式进行样式设置，如果我只使用 HTML 表单（只使用 HTML 部分中注释掉的行。)

如何将 CSS 类下的指定样式添加到 wtforms 字段？

Answer 1

wtforms 生成的元素与您最初渲染的元素不同。您的一些 css 选择器针对页面上不再存在的元素。

例如，您之前使用button 提交表单

<li><button class="active" type="submit" value="post">Post</button></li> 

你有一个选择器针对这个：.post-project-fields form ul li button，但是

{{ form.submit }}

# renders
<input id="submit" name="submit" type="submit" value="Post">

所以创建一个以输入为目标的选择器。

您还可以创建一个更通用的选择器，以针对任何具有 type 属性值为 "submit" 的元素

[type="submit"] {
  color: #000000;
  font-size: 16px;
  border: 1px solid #e5e5e5;
  padding: 10px 25px;
  display: inline-block;
  background-color: #d7d7d7;
  font-weight: 600;
  cursor: pointer;
}

检查浏览器中生成的元素并围绕它创建样式。