如何更改登录表单中 html 文本的颜色？ (WT表格)

Question

这是我的 html 文件，我在其中呈现我的烧瓶应用程序的模板：

{% extends "layout.html" %}

{% block app_content %}
    <div>
        {% from "_formhelpers.html" import render_field %}
        <div class = "container">
            <div class = "row">
                <div class = "col-md-5"></div>
                <div class = "col-md-12"></div>
                <div class = "col-md-5 col-sm-12 align-self-center">
                    <div class = "card">
                        <div class = "card-header">
                            LOG-IN
                        </div>
                        <div class = "card-body">
                            <div>
                                {{ form.hidden_tag() }}
                                {{ render_field(form.email, class = "form-control") }}
                                {{ render_field(form.password, class = "form-control") }}
                                {{ render_field(form.remember_me, class = "form-control") }}
                                {{ render_field(form.submit, class = "btn btn-primary") }}
                            </div>
                            <p>Don't have an account? <a href = "{{ url_for('auth.register') }}">Sign-Up</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock app_content %}

python 我放置属性的文件：

from flask_wtf import FlaskForm
from wtforms import StringField, BooleanField, IntegerField, PasswordField, SubmitField, TextAreaField
from wtforms.validators import DataRequired, length, email, EqualTo

class RegisterForm(FlaskForm):
    fname = StringField("First Name", validators = [DataRequired(), length(min = 2, max = 20)])
    lname = StringField("Last Name", validators = [DataRequired(), length(min = 2, max = 20)])
    email = StringField("Email", validators = [DataRequired(), email()])
    password = PasswordField("Password", validators = [DataRequired()])
    phoneno = StringField("Phone Number", validators=[DataRequired()])
    confirm_password = PasswordField("Password", validators = [DataRequired(), EqualTo("password")])
    submit = SubmitField("Signup")

class LoginForm(FlaskForm):
    email = StringField("Email", validators = [DataRequired(), email()])
    password = PasswordField("Password", validators = [DataRequired()])
    remember_me = BooleanField("Remember Me")
    submit = SubmitField("Login")

所以我的问题是，表单已成功创建，并且用户输入电子邮件、phone 号码等的输入区域很好，每个输入区域的标题都在其顶部，例如电子邮件输入栏将有“'email' 写在上面”。但是，它是黑色的，我希望它是白色的，因为我的背景是黑色的。

我对如何引用这些位于输入区域顶部的文本感到困惑，因为我使用的是 WTForms，正如您所见，它们实际上并不在 class 或其他任何地方。我在我的 html 中有一个样式部分，我在其中进行样式设置，例如，我通过添加 '.form-control' 等来引用表单本身，但这不会影响文本。我如何在我的样式部分引用此文本，或者我应该使用任何其他方式？

Answer 1

选项 1

您可以为 parent div 创建一个 class，然后在您的 CSS 文件中，为 class 指定一种颜色。这将使表单标签像给定颜色的“电子邮件”一样，但也会使表单输入文本（用户输入的内容）具有相同的颜色。例如：

<div class = "login-form">
  {{ form.hidden_tag() }}
  {{ render_field(form.email, class = "form-control") }}
  {{ render_field(form.password, class = "form-control") }}
  {{ render_field(form.remember_me, class = "form-control") }}
  {{ render_field(form.submit, class = "btn btn-primary") }}
</div>

CSS:

div.login-form {
  color: white;
}

选项 2

编辑“_formhelpers.html”模板并为每个标签分配不同的 class 属性值，然后为这些特定的 class 分配颜色。例如：

编辑“_formhelpers.html”文件

{% macro render_field(field) %}
  <div  class="form-label-example">
    <dt>{{ field.label }}
  </div>
  <div class="form-field-example">
    <dd>{{ field(**kwargs)|safe }}
      {% if field.errors %}
        <ul class=errors>
          {% for error in field.errors %}
            <li>{{ error }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    </dd>
  </div>
{% endmacro %}

编辑CSS

div.form-label-example {
  color: white;
}

div.form-field-example {
  color: black;
}

请注意，您现有的“form-control”标签正在使用 bootstrap（如果它已导入到您的文件中），因此将覆盖表单字段输入文本的自定义颜色，但是标题标签仍将具有您在 CSS.

中指定的自定义颜色

如何更改登录表单中 html 文本的颜色？ (WT表格)

How do I change the color of html text in my login form? (WTForms)

html

css

python-3.x

flask-wtforms