Django smart select not work if i add CSS style

Question

I have a little problem with django's function: "django-smart-select". Basically django-smart-select works until I add a CSS class to a form-field.

Here is my example:

in models.py:

from django.db import models
from smart_selects.db_fields import ChainedForeignKey 

# Create your models here.
class Company(models.Model):
    ID = models.AutoField(primary_key=True, unique=True)
    name = models.CharField(max_length=100)
    def __str__(self):
        return self.name

class Subcompany(models.Model):
    ID = models.AutoField(primary_key=True)
    name = models.CharField(max_length=100)
    ID_company = models.ForeignKey(Company, on_delete=models.CASCADE)
    def __str__(self):
        return self.name

class Interventions(models.Model):
    ID = models.AutoField(primary_key=True)
    start_date = models.DateField()
    end_date = models.DateField(blank=True, null=True) 
    hours = models.DecimalField(max_digits=24, decimal_places=1, blank=True, null=True)
    description = models.TextField()
    signature = models.CharField(max_length=100, blank=True)
    ID_company = models.ForeignKey(Company, on_delete=models.CASCADE)
    ID_subcompany = ChainedForeignKey(
        Subcompany,
        chained_field="ID_company",
        chained_model_field="ID_company",
        show_all=False,
        auto_choose=True,
        sort=True)
    def __str__(self):
        return  f'{self.start_date}'

so in forms.py:

from django import forms
from django.forms import DateInput, TimeInput, NumberInput, TextInput, Textarea, Select
from app1.models import Interventions
# Create your forms here.

class Forminterventions(forms.ModelForm):
    class Meta:
        model = Interventions
        exclude = ['ID']
        fields = ['start_date', 'end_date',
                  'hours',
                  'description',
                  'signature',
                  'ID_company', 'ID_subcompany']
        widgets = {
            'start_date': DateInput(attrs={'class': 'inputDate'}),
            'end_date': DateInput(attrs={'class': 'inputDate'}),
  
            'hours': NumberInput(attrs={'class': 'inputNumber'}),

            'description': Textarea(attrs={'class': 'inputText'}),
            'signature': TextInput(attrs={'class': 'inputText'}),
            
            'ID_company': Select(attrs={'class': 'inputCombo'}),
            'ID_subcompany': Select(attrs={'class': 'inputCombo'}),

        }

in style.css:

.inputDate .inputNumber .inputText .inputCombo{
    color: black; 
    font-family: 'EB Garamond', sans-serif; 
    font-size: x-large;
    text-align: center;
    width: 100%;
}

What I fail to understand is why if I strip these CSS attribute lines from the forms.py, django-smart-select works perfectly:

            #'ID_company': Select(attrs={'class': 'inputCombo'}),
            #'ID_subcompany': Select(attrs={'class': 'inputCombo'}),

I know that maybe I could give up modifying the html page showing the "Interventions" form with CSS. But I'd like to be able to modify it somehow and I don't understand where I'm wrong.

Sorry for the bad English.

Many thanks to all.

Answer 1

Finally I managed to solve the problem, analyzing the django smart select combobox with the DevTools. In practice, the dependent combobox of django-smart-selects has a class already predetermined for correct operation: class="chained-fk"

So, if you don't use this class, or forcefully change its name (as I did), django-smart-selects rightly doesn't work. To get django-smart-select working I then removed from Forms.py:

'ID_subcompany': Select(attrs={'class': 'inputCombo'}),

However, I managed to change the CSS properties of the combobox with some JavaScript code.

Thanks a lot anyway everyone.