Блог

Это мой HTML-файл, в котором я создаю шаблон для своего приложения flask:

 {% 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")
  

Итак, моя проблема в том, что форма успешно создана и хорошо работает с областями ввода, где пользователи вводят свой адрес электронной почты, номер телефона и т.д., С заголовками каждой области ввода поверх нее, так что, например, на панели ввода электронной почты будет написано «’email’ поверх нее». Однако он черный, и я хочу, чтобы он был белым, поскольку мой фон черный.

Я не понимаю, как я могу ссылаться на эти тексты, которые находятся поверх областей ввода, потому что я использую WTForms, и, как вы можете видеть, они на самом деле не относятся к классу или чему-то еще. У меня есть раздел стиля в моем html, где я делаю свой стиль, где, например, я сослался на саму форму, добавив ‘.form-control’ и т.д., Но это не влияет на текст. Как мне ссылаться на этот текст в разделе «Мой стиль» или есть какой-либо другой способ, который я должен использовать?

Вариант 1

Вы можете создать класс для родительского div, а затем в своем файле CSS присвоить этому классу цвет. Это приведет к тому, что метки формы, такие как «электронная почта», будут иметь заданный цвет, но также текст ввода формы (который вводит пользователь) будет того же цвета. Например:

 <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 » создайте шаблон и назначьте разные значения атрибута класса каждому из тегов, затем назначьте цвета этим конкретным классам. Например:

Отредактируйте «_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.