同じクラスの2つの入力が異なる外観を持っています（HTML）

Question

同じクラスの2つの入力を持つフォームを作っていますが、外観が異なります。タイプを「電子メール」から「テキスト」に変更すると、同じ外観しか得られません。コードに問題があるのですか、それを行うHTML5ですか？あなたのcss fileで

<form action="../../../redirect.html"> 
 
<input name="username" id="login-username" class="login-input pure-u-1" type="email" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din e-mail" title="Indtast din e-mail" autocorrect="off" spellcheck="false" required autofocus> 
 

 
<input name="password" id="login-password" class="login-input pure-u-1" type="password" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din adgangskode" title="Indtast din adgangskode" autocorrect="off" spellcheck="false" required> 
 
<button type="submit" formaction="../../../redirect.html" id="login-signing" class="pure-u-1 pure-button mbr-button-primary" value="Submit" tabindex="1">Login</button> 
 
</form>

Answer 1

、スタイルの入力のクラス「純粋な形」を持っていることがありますが、「ログイン入力」を使用しているようです。その問題は「HTML5」ではなくCSSスタイルを使用する方法です。

これは正しいコードです：あなたの側面を行う外見の種類

<form action="../../../redirect.html"> 
<input name="username" id="login-username" class="pure-form pure-u-1" type="email" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din e-mail" title="Indtast din e-mail" autocorrect="off" spellcheck="false" required autofocus> 

<input name="password" id="login-password" class="pure-form pure-u-1" type="password" maxlength="96" tabindex="1" aria-required="true" value="" placeholder="Indtast din adgangskode" title="Indtast din adgangskode" autocorrect="off" spellcheck="false" required> 
<button type="submit" formaction="../../../redirect.html" id="login-signing" class="pure-u-1 pure-button mbr-button-primary" value="Submit" tabindex="1">Login</button> 
</form>