时间戳

首页 > 解决方案 > 如何使用自定义 css 类设置 WTForm 字段的样式？

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

问题描述

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

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 字段？

标签： htmlcssflaskflask-wtformswtforms

解决方案

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

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

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

并且您有一个针对 this: 的选择器.post-project-fields form ul li button，但是

{{ form.submit }}

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

因此，请创建一个以输入为目标的选择器。

您还可以制作一个更通用的选择器，以针对具有typevalue 属性的任何元素"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;
}

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

推荐阅读