Django 将类添加到表单 <input ..> 字段

Question

我们正在寻找一种将 CSS 类属性添加到 Django 表单的 <input..> 字段的解决方案。我们已经看到建议我们将字段包装在 <div> http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template 中的建议，但该建议似乎主要适用于字段标签，而不是 <input ...>。

如果您尝试在<input> 字段周围创建边框，则此特定建议不起作用。在这种情况下，<div> 将应用于边界框，而不是实际的输入字段。例如.wrapper { border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;} 将在字段周围创建一个框，而不是替换默认的<input ...> 边框。

我们已经退回到通过应用于 Form 类的小部件来应用该类，但这缺乏一定程度的代码优雅（并且违反了 DRY）。例如，这解决了需求。

class ContactUsForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={'class':'form_text'}))

当然，这将表单与 CSS 紧密地联系在一起。如果您尝试将类属性应用于<input ..> 字段，而表单是基于酷炫的新forms.ModelForm 系统，那么它会变得更加复杂。

我们花了两天的大部分时间来研究这个问题（并研究 Django 源代码），看起来我们可能在这个特定问题上达到了 Django 的最远边缘——但我们只是想在 StackOverflow 上试一试，看看是否有其他人有洞察力。

感谢您的任何见解。

最后一条评论：如果问题在于我们对 CSS 的理解（而不是 django），请随时提出来。我们花了相当多的时间来处理 CSS 选项，但似乎没有一个能让我们实现所需的效果——即替换默认的 <input...> 边框。

Answer 1

你可以像这样使用子选择器：

.fieldWrapper > input {border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;}