Django agregar clase al formulario <input ..> campo

Question

Estamos buscando una solución para agregar un atributo de clase CSS a un campo <input..> del formulario Django. Hemos visto los consejos que sugieren que envolvemos el campo en un <div>http://docs.djangoproject.com/en/1.2/topics/forms/#customizing-the-form-template, pero este consejo parece aplicarse principalmente a una etiqueta de campos, no es <input ...>.

Este consejo particular no funciona si está intentando crear un borde alrededor del campo <input>. En ese caso, el <div> se aplicará al cuadro delimitador, y no al campo de entrada real. Por ejemplo, .wrapper { border: 1px solid #666;line-height:22px;height:22px;padding:3px 5px;width:205px;} creará un cuadro alrededor del campo, en lugar de reemplazar el borde predeterminado <input ...>.

Hemos vuelto a aplicar la clase a través de un widget aplicado a la clase Form, pero esto carece de una cierta cantidad de elegancia del código (y viola el DRY). Por ejemplo, esto resuelve la necesidad.

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

Pero, por supuesto, esto ata la Forma muy estrechamente al CSS. Y se vuelve aún más complejo si está tratando de aplicar atributos de clase a los campos <input ..> si el formulario se basa en cambio en el nuevo y genial sistema forms.ModelForm.

Hemos pasado la mayor parte de dos días jugando con este problema (y estudiando el código fuente de Django), y parece que estamos llegando a los extremos de Django para este problema en particular, pero solo queríamos para tomar un pase en StackOverflow para ver si alguien más tenía una idea.

Gracias por cualquier idea.

Un último comentario: siéntase libre de ponernos directamente sobre esto si el problema es nuestra comprensión de CSS (en lugar de django). Hemos pasado bastante tiempo jugando con las opciones de CSS, pero ninguna de ellas nos permite lograr el efecto deseado, es decir, reemplazar el borde predeterminado <input...>.

Answer 1

Se puede usar selector de niño como éste:

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