2个具有相同类的输入具有不同的外观（HTML）

Question

我制作了一个具有相同类的两个输入的表单，但它们具有不同的外观。如果将类型从“电子邮件”更改为“文本”，它们只会出现相同的外观。这是代码问题还是HTML5呢？

<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

在css file，似乎它的风格输入的有类“纯形式”，但你已经使用“密码输入”。所以它似乎是问题是关于如何使用您的CSS样式而不是“HTML5”。

这是正确的代码：

<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>