Пользовательские входы django-filter в templeta

Я хочу улучшить отрисовку входов в шаблоне. Я пробовал добавлять стили из виджетов в классе:

class ProductosFilter(django_filters.FilterSet):

    class Meta:
        model = Elemento
        fields = ('estado','tipo','grupo')
        widgets = {
            'grupo':widgets.Select(attrs={
                'class': 'form-control form-select ', 
            }),
        }

но у меня ничего не получилось

вот мой шаблон:

<div class="col-md-12" style="text-align: right; padding-top: 50px; padding-right: 50px;" >
    {{filter.form}}
    <button type="submit" class="btn btn-primary">Filtrar</button>
</div>

любой вклад приветствуется

Вы можете использовать JavaScript и получить доступ к этому вводу, используя другие имена или атрибуты, и стилизовать его в JavaScript, как в следующем коде:

var inputVal = document.getElementById("search"); inputVal.style.backgroundColor = "yellow";

Или вы можете либо дать ему идею или атрибут, либо стилизовать свои собственные вводы следующим образом :

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}


input[type=text]{
  background:yellow;
}
<input type="text">

Я могу взять id селекта, сгенерированный автокамментально путем конкатенации между строкой "id_" + "имя_поля" и установить атрибуты с помощью js или css листа, но я чувствую, что это долгий путь.

<select name="tipo" id="id_tipo">
  <option value="" selected="">---------</option>

  <option value="Consumo">Consumo</option>

  <option value="Inventario">Inventario</option>

  <option value="Servicio">Servicio</option>

</select>

js:

select_obj = document.getElementById('id_tipo')
select_obj.style.width = '100px';
Вернуться на верх