如何使用自定义 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-->

classpost-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 class 是这样的，所以它的样式不是我想要的，如果我只使用 HTML 形式它会是这样的（仅使用 HTML 部分中注释掉的行。)

如何将 CSS class 下的指定样式添加到 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;
}

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

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

How to style WTForm fields using custom css classes?

html

css

flask

wtforms

flask-wtforms

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

How to style WTForm fields using custom css classes?

html

css

flask

wtforms

flask-wtforms

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