Django添加类以形成< input ..>领域 [英] Django add class to form <input ..> field
问题描述
我们正在寻找一个解决方案，将CSS类属性添加到Django表单的< input ..> 字段中。我们已经看到建议，我们将该字段包含在一个< div> http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template ，但是这个建议主要似乎适用于字段标签，而不是< input ...> 。
We are looking for a solution to add a CSS class attribute to a Django form's <input..> field. We've seen the advice that suggests we wrap the field in a <div> http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template, but this advice mainly seems to apply to a fields label, not it's <input ...>.
如果您尝试在< input> 字段周围创建边框，则此特定建议不起作用。在这种情况下，< div> 将被应用于边界框，而不是实际的输入字段。例如 .wrapper {border：1px solid＃666; line-height：22px; height：22px; padding：3px 5px; width：205px;} 将创建一个框该字段，而不是替换默认的< input ...> border。
This particular advice doesn't work if you are trying to create a border around the <input> field. In that case, the <div> will be applied to the bounding box, and not the actual input field. For example .wrapper { border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;} will create a box around the field, rather than replace the default <input ...> border.
我们已经下降通过应用于Form类的窗口小部件应用该类，但这缺少一定量的代码优雅（并且违反DRY）。例如，这解决了需要。
We've fallen back to applying the class through a widget applied to the Form class, but this lacks a certain amount of code elegance (and violates DRY). For example, this solves the need.
class ContactUsForm(forms.Form):
name = forms.CharField(widget=forms.TextInput(attrs={'class':'form_text'}))
但是当然，这种格式与CSS非常紧密地结合在一起。如果您正在尝试将类属性应用于< input ..> 字段，如果该表单基于酷的新表单，则它变得更加复杂.ModelForm系统
But of course, this ties the Form very tightly to the CSS. And it get's even more complex if you are trying to apply class attributes to <input ..> fields if the form is based instead on the cool new forms.ModelForm system.
我们已经花了两天的时间来研究这个问题（并研究了Django源代码），看起来我们可能会达到最远的边缘Django针对这个特殊问题 - 但是我们只想在StackOverflow中传递一遍，看看有没有人有洞察力。
We've spent the better part of two days playing with this issue (and studying Django source code), and it looks like we may be reaching the farthest edges of Django for this one particular issue -- but we just wanted to take one pass at StackOverflow to see if anyone else had insight.
感谢任何见解。
一个最后的评论：如果问题是我们对CSS（而不是django）的理解，请随时直接给我们。我们花了相当多的时间搞砸了CSS选项，但是他们似乎都不能让我们完成所需的效果 - 这是替换默认的< input ...> border。
One final comment: feel free to set us straight on this if the problem is our understanding CSS (rather than django). We've spent quite a bit of time messing with CSS options, but none of them seem to allow us to accomplish the effect desired -- that is replacing the default <input...> border.
推荐答案
你可以使用这样的子选择器：
You could use child selector like this:
.fieldWrapper > input {border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;}
这篇关于Django添加类以形成< input ..>领域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
