Django добавить класс в формуполе - PullRequest
6 голосов
/ 12 марта 2011

Мы ищем решение для добавления атрибута класса CSS в поле <input..> формы Django.Мы видели совет, который предлагает нам обернуть поле в <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, но этого не хватаетопределенное количество кода элегантности (и нарушает СУХОЙ).Например, это решает проблему.

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

Но, конечно, это очень тесно связывает форму с CSS.И это становится еще более сложным, если вы пытаетесь применить атрибуты класса к <input ..> полям, если форма основана вместо этого на классных новых формах. Система ModelForm.

Мы потратили лучшую часть двух днейиграя с этой проблемой (и изучая исходный код Django), и похоже, что мы можем достичь самых дальних краев Django для этой конкретной проблемы - но мы просто хотели сделать один проход в StackOverflow, чтобы увидеть, есть ли у кого-то еще понимание.

Спасибо за понимание.

И последний комментарий: не стесняйтесь, если вы решите наше понимание CSS (а не django), не стесняйтесь.Мы потратили довольно много времени на то, чтобы поработать с параметрами CSS, но ни один из них, похоже, не позволяет нам достичь желаемого эффекта - это замена стандартной границы <input...>.

1 Ответ

8 голосов
/ 13 марта 2011

Вы можете использовать дочерний селектор вот так:

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