django-templates - Django 添加类以形成 <input ..> 字段

Question

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

如果您尝试在 <input> 周围创建边框，则此特定建议不起作用。 field 。在这种情况下，<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'}))

但是当然，这将 Form 与 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;}