django cssが思い通りに適応されない

前提・実現したいこと

djangoを使ってwebページを作ろうとしているのですが、フリーのサインアップフォームを持ってきたのですが見本通りに表示されません。本来は

このように表示されてほしいのですが、実際はこのようになっています。

この部分に当たるのが<div class="form__input">なのですが
F12を押して何がだめなのかを見てみると　

このようになっています。
情報が足りなければ質問の修正依頼を出していただけると助かります。

該当のソースコード

signup.html

    <head>
    <link rel="stylesheet" href="{% static 'css/signup.css' %}">
    </head>

    <body>
        <div class="user">
            <header class="user__header">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
                <h1 class="user__title">A lightweight and simple sign-up form</h1>
            </header>
            
            <form method='POST' role="form" action="" class="form">
                {% csrf_token %}
                <div class="form__group">
                    <div class="form__input">{{ form.username }}</div>
                </dv>
                
                <div class="form__group">
                    <div class="form__input">{{ form.email }}</div>
                </dv>
                
                <div class="form__group">
                    <div class="form__input">{{ form.password1 }}</div>
                </dv>
                
                <div class="form__group">
                    <div class="form__input">{{ form.password2 }}</div>
                </dv>
                
                <button class="btn" type="submit">Register</button>
                
                {# エラーメッセージを表示 #}
                {% if form.errors %}
                    {% for field in form %}
                        {% for error in field.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                     {% endfor %}
                {% endif %} 
            </form>
        </div>
        <script type="text/javascript" src="{% static 'js/signup.js' %}"></script>
    </body>

signup.css

.form__input {
    display: block;
    width: 100%;
    padding: 20px;
    font-family: "Roboto";
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    transition: 0.3s;
    
    &:focus {
        background: darken(#fff, 3%);
    }
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

フリーのサインアップフォームの元々のコード

kei344

2020/05/10 17:10

（質問文は編集できます）「フリーのサインアップフォーム」の出典をURLとともに追記してください。

yuudai

2020/05/11 06:04

補足情報の所にURL貼ってあります。

kei344

2020/05/11 06:59

それはcodepenであってそれを紹介したページではありません。（ライセンスについても明記がありません）

行動規範の内容に同意します

回答1件

ベストアンサー

form自体にcssをかけてないからじゃないですか？

HTML
1<div class="form__input">{{ form.username }}</div>
2```divでかこむのではなく、forms.pyでクラスをform自体に指定してみては？以下
3```Python
4class ...(forms.Form):
5    ...
6    def __init__(self, *args, **kwargs):
7        super().__init__(*args, **kwargs)
8        for field in self.fields.values():
9            # すべてのフィールドにform__inputクラスを指定
10            field.widget.attrs["class"] = "form__input"
11

投稿2020/05/10 20:13

ForestSeo

総合スコア2720

yuudai

2020/05/11 08:35

ありがとうございます。signup.htmlをこのようにして、forms.pyを言われたとおりに変えてみると見本と同じようになりました。 <form method='POST' role="form" action="" class="form"> {% csrf_token %} <div class="form__group"> {{ form.username }} </dv> <div class="form__group"> {{ form.email}} </dv> <div class="form__group"> {{ form.password1 }} </dv> <div class="form__group"> {{ form.password2 }} </dv> <button class="btn" type="submit">Register</button>