After updating my password reset form in Django, I customized the background color to black and the text color to white. However, the help text still remains black, as shown in this image: https://i.sstatic.net/jhXqV.png
I've attempted various methods like assigning CSS styles with a white color, using IDs with JavaScript, and even trying setProperty(), but the text stubbornly stays black.
Here's a snippet of my template:
{% extends "base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}Password change{% endblock %}
{% block styling %}
<link rel="stylesheet" href="{% static "styly_main.css" %}">
<style>
body {
background-color: #192444;
}
.c2 {
max-width: 280px;
background-color: black;
color: white !important;
border: black solid 1px;
border-radius: 6px;
padding: 1rem;
padding-bottom: 1.25rem;
margin: 1rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.container {
max-width: 350px;
min-width: 340px;
}
</style>
{% endblock%}
{% block content %}
<div class="container-fluid overflow-hidden">
{% include "includes/header_main.html" %}
<div class="container c1">
<div class="row gx-1">
<div id="id1" class="col text-center pb-2 pt-3">
<H3>Password change</h3>
<form method="post">
{% csrf_token %}
<div class="c2">
{{ form|crispy }}
</div>
<p>
<button type="submit" class="btn btn-dark"><i class="fa-solid fa-floppy-disk"></i> Submit</button>
</p>
</form>
<p>
<a href="{% url 'index' %}" class="a2">Back to Home.</a>
</p>
</div>
</div>
</div>
{% include "includes/footer.html""%}
</div>
{% endblock %}
{% block script %}
<script>
const id1Elm = document.getElementById("id1");
id1Elm.style.setProperty('color', 'white', 'important');
</script>
{% endblock script %}
Any suggestions on how to update the color of the help text?