模板中 django-filter 的自定义输入答案

【问题标题】：Custom inputs of django-filter in template模板中 django-filter 的自定义输入
【发布时间】：2022-01-11 08:28:39
【问题描述】：

我想改进模板中输入的呈现。我尝试从类中的小部件中添加样式：

class ProductosFilter(django_filters.FilterSet):

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

但我没有做到，是否可以从 Django 的课程中做到这一点？。

这是我的模板：

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

感谢任何贡献

【问题讨论】：

标签： django django-forms django-templates

【解决方案1】：

您可以使用 JavaScript 并使用其他名称或属性访问该输入，并在 JavaScript 中设置样式，如下面的代码：

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

或者您可以给它一个想法或一个属性或设置您自己的输入样式，如下所示：

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

&lt;input type="text"&gt;

【讨论】：

感谢您的宝贵时间。当我使用你的答案时，我得到 Uncaught SyntaxError: unexpected token: '{', 你在使用 jquery 吗？而且我不需要将它应用于所有输入，如果可能的话，我想从 django 修改它们，因为当 django 创建输入时，它是使用 id_name_field 之类的 id 创建的，并且与我已经使用其中一个论文有冲突保存一个可行的。

【解决方案2】：

我可以通过字符串“id_”+“name_field”之间的连接自动生成选择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';

【讨论】：