Django添加类以形成<input .. =“”/>字段

时间:2011-03-12 20:48:47

标签: django-templates django-forms

我们正在寻找一种解决方案,将一个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'}))

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

我们花了两天时间玩这个问题(并研究Django源代码),看起来我们可能会在这个特定问题上达到Django最远的边缘 - 但我们只是想在StackOverflow上查看一下是否有其他人有洞察力。

感谢您的任何见解。

最后一条评论:如果问题是我们理解CSS(而不是django),请随意让我们直截了当。我们花了很多时间搞乱CSS选项,但它们似乎都没有让我们完成所需的效果 - 即取代默认的<input...>边框。

1 个答案:

答案 0 :(得分:8)

您可以像这样使用子选择器:

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