如何调整Django表单下拉字段宽度？内联CSS与Widgets尝试后无效

你的问题出在两个核心点：

1. forms.py里的Meta类无效：你使用的是forms.Form而非ModelForm，Form类不支持通过Meta配置widgets，这部分代码完全不会生效。
2. 模板里的h6包裹方式错误：给h6标签设置width样式，不会传递给内部的select下拉框，样式无法作用到目标元素本身。

修正方案 #

方法一：在字段定义时直接配置Widget（推荐） #

修改forms.py，直接在product字段指定带样式的widget，删除无效的Meta类：

from django import forms

PRODUCTS = (
    ('hp','HP'),
    ('wipro', 'WIPRO'),
)

class InputForm(forms.Form):
    product = forms.ChoiceField(
        choices=PRODUCTS,
        widget=forms.Select(attrs={'style': 'width: 350px;'})
    )
    rule = forms.CharField(widget=forms.Textarea, label="Rules")

同步修改index.html，去掉多余的h6标签，直接渲染字段：

{% extends "base_generic.html" %}
 {% block content %}
  <form action = "" method = "post">
    {% csrf_token %}
      <center>Product: {{ form.product }}</center> 
      <br>
      <center>Rules: {{ form.rule }}</center>
    <input type="submit" value="Compute">
  </form>
{% endblock %}

方法二：在模板中直接设置字段样式 #

如果不想修改forms.py，也可以在模板里直接给下拉框添加样式：

{% extends "base_generic.html" %}
 {% block content %}
  <form action = "" method = "post">
    {% csrf_token %}
      <center>Product: {{ form.product.widget.attrs.style="width: 350px;" }}</center> 
      <br>
      <center>Rules: {{ form.rule }}</center>
    <input type="submit" value="Compute">
  </form>
{% endblock %}

两种方式都能让下拉框的宽度设置生效。

内容的提问来源于stack exchange，提问作者Surendranatha Reddy T