css - CSSフォーム-入力幅が機能しない

Question

次のCSS：

#contactform {
    width: 400px;
    height: 215px;
}

.webform {
}

.webform input .name {
    width: 50px;
}

.webform input .email {
    width: 70px;
}

.webform input .comments {
    width: 200px;
}

HTMLで使用する場合

    <div id="contactform">
        <div class="webform">
            <input class="name" name="Name" type="text" id="senderName" placeholder="Enter your name here">
            <input class="email" name="Email" type="text" id="senderEmail" placeholder="Enter a valid email adress here">
            <br>
            <input class="comments" name="Comments" type="text" id="senderComments" placeholder="Comments...">
        </div>
    </div>

同じ幅の3つの入力フィールドすべてを生成します（50px =つまり、の幅webform input）。何が間違っているのかわかりません。ヘルプ？

Answer 1

あなたのクラスは、inputの子要素ではなく、あなたの にありますinput。そのためinput .name、 などをinput.nameまたは に変更し、 .name3 つすべてについて繰り返します。:)

Answer 2

入力とクラス名の間の空白を削除します

.webform input.name {
    width: 50px;
}

.webform input.email {
    width: 70px;
}

.webform input.comments {
    width: 200px;
}

このフィドルを試してください