Form customization in Django template

Question

I want to add styling to the below form (main objective is to change the text color of placeholder as my form is of dark color and the placeholder is not visible due to its default gray color) I am sure there must be some way to achieve this in the template only.

Snippet from CSS

 ::placeholder {
      color: aquamarine;
      opacity: 1;
    }

Snippet from Template

<form action="{% url 'register' %}" class="box" method="POST">
  <input type="text" name="username" placeholder="{{form.username.label}}" id=""/>
  <input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" />
  <input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/>
  <input type="text" name="email"placeholder="{{form.email.label}}"id="" />
  <input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/>
  <input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/>
  <input type="submit" value="Submit" />
</form>

This is my form that I have created to add a new user (django.contrib.auth.models User). I am not sure how do I use {{form.username}} in the existing form. If I simply put {{form.username}} to the form it is creating a new field without any styling applied to it.

Answer 1

Maybe I misunderstood what you want to achieve, but you can simply set custom CSS via <style></style> tag. If you would like to a more sophisticated solution, you can define CSS class in form widget attributes or append custom styles to form .

 <style> ::placeholder { color: aquamarine; opacity: 1; } </style> <form action="{% url 'register' %}" class="box" method="POST"> <input type="text" name="username" placeholder="{{form.username.label}}" id=""/> <input type="text" name="firstname" placeholder="{{form.first_name.label}}" id="" /> <input type="text" name="lastname" placeholder="{{form.last_name.label}}" id=""/> <input type="text" name="email"placeholder="{{form.email.label}}"id="" /> <input type="text" name="password1" placeholder="{{form.password1.label}}" id=""/> <input type="text" name="password2" placeholder="{{form.password2.label}}" id=""/> <input type="submit" value="Submit" /> </form>

Answer 2

I found a dirty fix for the problem. I first entered made the form like below -

<form action="{% url 'register' %}" class="box" method="POST">
{{form.username}}
{{form.first_name}}
...
</form>

Then I inspected the rendered template and stole the HTML equivalent of the above code. I have added the all the required attributes in the input tags. It looks like below snippet -

      {% csrf_token%}
      <input
        type="text"
        name="username"
        maxlength="150"
        **placeholder="Username"**
        autofocus=""
        required=""
        id="id_username"
      />

      <input
        type="text"
        name="first_name"
        maxlength="30"
        **placeholder="First Name"**
        id="id_first_name"
      />
...

I know this probably is not a perfect solution and there must be a more elegant way of handling this scenario. However, I am going ahead with this approach for time being as it is serving the purpose.