形状极浅灰色

Question

又一个菜鸟问题。

我正在创建一个表单，但该表单一直显示为灰色

页面如下：

{% extends 'base.html' %}

{% block title %}
    {% if form.instance.pk %}Update Asset{% else %}Create Asset{% endif %}
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">{% if form.instance.pk %}Update Asset{% else %}Create Asset{% endif %}</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{% if form.instance.pk %}{% url 'asset_update' form.instance.pk %}{% else %}{% url 'asset_create' %}{% endif %}">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Name</label>
                            {{ form.name }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Tag</label>
                            {{ form.tag }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Location</label>
                            {{ form.location }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Purchase Price</label>
                            {{ form.purchase_price }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Purchase Date</label>
                            {{ form.purchase_date }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Category</label>
                            {{ form.category }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Status</label>
                            {{ form.status }}
                        </div>
                        <div class="mb-3">
                            <label class="form-label fw-bold text-dark">Assigned To</label>
                            {{ form.assigned_to }}
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">{% if form.instance.pk %}Update{% else %}Create{% endif %} Asset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

我尝试了一些方法，我也遇到了标签是白色而不是黑色的问题，所以它显示在 main.css 中

body {
    background-color: white;
}

label {
    cursor: pointer;
    color: #555;
    display: block;
    padding: 10px;
    margin: 3px;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: black;
}


/* Form field styles */
.form-group label {
: #555;
}
.form-group input
    color: #000,
.form-group select,
.form-group textarea {
    color: #000; /* Change text color to black */
}

.text-custom {
    color: #000; /* Replace 'your-desired-color' with the desired color value */
}

我尝试的是改变卡体的背景

我不熟悉 HTML，所以我可能做错了什么

刚刚添加了信息，其后端是 django-python。

Answer 1

您的表单似乎遇到了样式问题，特别是背景颜色和文本颜色。让我们逐步解决这些问题：

表格背景颜色：

在 HTML 中，您使用 Bootstrap 类进行样式设置，这意味着背景颜色可能来自 Bootstrap 的默认样式。要更改表单的背景颜色，您可以添加自定义类来覆盖 Bootstrap 的样式。

<div class="card-body custom-bg-color">

然后在您的 CSS 文件（main.css）中，使用您想要的背景颜色定义 .custom-bg-color 类：

.custom-bg-color {
    background-color: #ffffff; /* Change to your desired background color */
}

文字颜色问题：

您似乎已经尝试将标签和表单元素的文本颜色设置为黑色。但是，您的 CSS 选择器可能无法正确定位元素。

/* Label text color */
label.form-label {
    color: #000000; /* Black color */
}

/* Form field text color */
.card-body input,
.card-body select,
.card-body textarea {
    color: #000000; /* Black color */
}

确保在 Bootstrap 的默认样式之后正确应用这些样式，以确保它们覆盖它们。

通过实施这些更改，您应该能够控制表单的背景颜色并将标签和表单字段的文本颜色设置为黑色。