Djangoでformの幅を変更する方法

Djangoでformの幅を変更する方法をご紹介します。

条件

• Django 2.1.7
• Python 3.7.0

実装

forms.py

以下のようなformが定義されているものとします。

class SearchForm(forms.Form):

    title = forms.CharField(
        initial='',
        label='タイトル',
        required = False,
    )
    text = forms.CharField(
        initial='',
        label='内容',
        required=False,
    )

css

forms.pyで定義した項目に「id_」を付けて、cssに記述します。
cssで定義した内容のテンプレートへの設定は不要です。

/* フォーム入力 */
#id_title, #id_text {
    width: 280px;
    height: 32px;
}

実行結果

適用前

適用後

適用前と比較してフォーム幅が伸びていることが分かります。

参考

stackoverflow

https://stackoverflow.com/questions/110378/change-the-width-of-form-elements-created-with-modelform-in-django