How to remove arrows from Django integerField without maintaining the only number input feature?

forms.py

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm
from .models import Profile


class UserRegisterForm(UserCreationForm):
    email = forms.EmailField()
    registration = forms.IntegerField(label='Registration Number')

    class Meta:
        model = User
        fields = ['username', 'email','registration','password1', 'password2']

How can I remove the up and down arrows from the registration field? P.S. I want to only allow the user to input numbers in this field.

This can be done in CSS:

Like so:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;

You should be able to make it specific to that field by using:

#id_registration::-webkit-outer-spin-button,
#id_registration::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;

You can do this by overriding widgets in Meta class.

Like this:

from django import forms
from django.contrib.auth.models import User
from django.contrib.auth.forms import UserCreationForm
from .models import Profile
# Import widget that you want
from django.forms import TextInput


class UserRegisterForm(UserCreationForm):
    email = forms.EmailField()
    registration = forms.IntegerField(label='Registration Number')

    class Meta:
        model = User
        fields = ['username', 'email','registration','password1', 'password2']
        widgets = {
            'registration': TextInput()
        }

Also I'm not sure but you can just try this:

class UserRegisterForm(UserCreationForm):
    email = forms.EmailField()
    # Add widget to your field
    registration = forms.IntegerField(label='Registration Number', widget=forms.TextInput())

    class Meta:
        model = User
        fields = ['username', 'email','registration','password1', 'password2']

For more info:

Overriding the default fields

Back to Top