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

user_17587311 0
Viewed 373

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.

django-templates django-forms django-views django-models django
2 Answers

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;
user_114758460

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

user_91268050
Related