Input field not white

Using Django Templates & Frontend
1

This is my input template:

{% extends 'base.html' %}

{% block content %}

    {% load static %}

    {% block additional_css %}
        <link rel="stylesheet" type="text/css" href="{% static 'css/form.css' %}">
    {% endblock %}

    <form class="form bg" method="post" action="{% url 'registration:login' %}">
    {% csrf_token %}

        <h1>Inloggen</h1>
        <br>
        <p>Gebruik de gegevens die je hebt ontvangen of vraag ze aan.</p>

        <!-- Inlognaam input -->
        <div class="mb-4">
            <label class="form-label" for="id_username">Gebruikersnaam</label>
            <input type="text" id="id_username" class="form-control" name="username" required autofocus>
        </div>

        <!-- Password input -->
        <div class="form-outline mb-4">
            <label class="form-label" for="id_password">Wachtwoord</label>
            <input type="password" id="id_password" class="form-control" name="password" required autofocus>

        </div>

        <!-- 2 column grid layout for inline styling -->
        <div class="row mb-4">
            <div class="col d-flex justify-content-center">
                <!-- Checkbox -->
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="RemindMe" checked/>
                    <label class="form-check-label" for="form2Example31"> Onthoud mij </label>
                </div>
            </div>

            <div class="col">
                <!-- Simple link -->
                <a href="#!">Wachtwoord vergeten?</a>
            </div>
        </div>

        <!-- Submit button -->
        <button type="submit" class="btn btn-primary">Log in</button>

        <!-- Register buttons -->
        <div class="text-center">
            <p>Not a member? <a href="#!">Register</a></p>
        </div>
    </form>

{% endblock %}

Here is a screenprint:
input form

Only when the values are valid the background of the input field turns blue. I want this to be white but whatever I try it is not working.

Any idea?

2

What are the styles defined in your css ?

You probably have a css rule like

input:valid {
  background-color: ...
}

Defining the background color of your valid inputs.

Looking at the Dom inspector of your browser should give you the css rule responsible for this backgroung color

3

I use cdn bootstrap 5 and some custom css. At the moment no input styling because everything I tried did not effect the input background when valid being blue.

Inspecting I find these styling:

.form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: var(--bs-form-control-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

I think the default styling comes from the build in ‘input’ form styles because an other created form with the same styling does not have the blue background in the input fields

4

can you post your whole

?

5

Nothing related to the input field but maybe I oversee things. Thanks for your concern.

css/form.css

body{
     margin: 20px;
}

.bg{
    background-color: #d5eeee;
}

h2 {
    color: darkorange;
    font-size: 30px;
    text-align: left;
    margin-bottom: 10px;
}

.form{
    max-width: 450px;
    border-radius: 10px;
    padding: 20px;
}

.form label{
    font-size: 12px;
    font-weight: bold;
}

.small-size{
    max-width: 150px;
}

.shift-title{
    border-style: solid;
    border-width: 2px;
    border-color: #4B92DB;
    color: #4B92DB;
}

.select-value{
    border-style: solid;
    border-width: 2px;
    border-color: #FF9966;
}

.just-info{
    margin: 10px 0;
}

.use-width{
    width: auto;
}

.align-right {
  float: right;
}
6

What likely would be helpful would be to use your browser’s developer tools to see what css elements are styling those particular areas.

7

This was the only thing I could find there

8

What happens if you remove or out-comment this part ?

9

Nothing happends probably because it is not used in my login template

#registration/login.html

{% extends 'base.html' %}

{% block content %}

    {% load static %}

    {% block additional_css %}
        <link rel="stylesheet" type="text/css" href="{% static 'css/form.css' %}">
    {% endblock %}

    <form class="form bg" method="post" action="{% url 'login' %}">
    {% csrf_token %}

        <h2>Inloggen</h2>
        <br>
        <p>Gebruik de gegevens die je hebt ontvangen of vraag ze aan.</p>

        <!-- Inlognaam input -->
        <div class="mb-4">
            <label class="form-label" for="id_username">Gebruikersnaam</label>
            <input type="text" id="id_username" class="form-control" name="username" required autofocus>
        </div>

        <!-- Password input -->
        <div class="mb-4">
            <label class="form-label" for="id_password">Wachtwoord</label>
            <input type="password" id="id_password" class="form-control" name="password" required autofocus>
        </div>

        <!-- 2 column grid layout for inline styling -->
        <div class="row mb-4">
            <div class="col d-flex justify-content-center">
                <!-- Checkbox -->
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="RemindMe" checked/>
                    <label class="form-check-label" for="form2Example31"> Onthoud mij </label>
                </div>
            </div>

            <div class="col">
                <!-- Simple link -->
                <a href="#!">Wachtwoord vergeten?</a>
            </div>
        </div>

        <!-- Submit button -->
        <button type="submit" class="btn btn-primary custom-button">Log in</button>

        <!-- Register buttons -->
        <div class="text-center">
            <p>Not a member? <a href="#!">Register</a></p>
        </div>
    </form>

{% endblock %}
10

is somewhere in the project javascript that could cause this ? Other thing would be “class” definitions in forms but you are not using a django form here it seems…

from my experiences here, when i was stuck and nobody had a clue: i simply didn`t present the relevant code part that would have leaded to it :wink:

11

Thanks for you concern doc1977 For now I stop worrying other more important things to accomplish.

12

Other Idea would be to have a look at your base.html which is extended in your code. Maybe there is something hidden ?