html - 登录表单在关注密码输入类型时更改 css

Question

此表单在 Chrome 和 Firefox 中运行良好。但是在 IE 上，这太疯狂了。

您可以在此处查看表格:http://www.alsite.com.br/clinicadosono

为什么这在 IE8 中不能正常工作？ IE9 听起来不错!

这是我的登录表单的代码:

<form class="form-1" action="" method="post">
    <p><input type="text" name="usuario" placeholder="Login" required /></p>
    <p><input type="password" name='senha' placeholder="Senha" required /></p>
    <p><input type="submit" name="enviar" value="Entrar" /></p>
    <div class="clear"></div>
    <p class="clique_aqui_cadastro">Não possui cadastro? <a href="#">Clique aqui</a></p>
</form>

这是我的 CSS:

.form-1 {
    width: 256px;
    margin:0 auto;
}

.form-1 input[type=text],
.form-1 input[type=password] {
    width: 222px;
    height: 10px;
    padding: 8px 4px 8px 25px;
    margin-bottom: 5px;

    /* Styles */
    border: 1px solid #d2d3d4; /* Fallback */
    background: #f1f1f1 url(../imagens/icone_login.png) left no-repeat;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    color: #878787;
    font-family: 'Comfortaa', cursive;
    font-size:12px;

    outline:none;

    -webkit-border-radius:5px;
    border-radius:5px;
}
.form-1 input[type=password] {
    background: #f1f1f1 url(../imagens/icone_pass.png) left no-repeat;
    width: 126px;
    float:left;
    margin-right:5px;
}

.form-1 input[type=submit] {
    width: 90px;
    height: 28px;
    background: #78a7a7;
    border: 1px solid #6db5b5;
    cursor: pointer;
    transition: all 0.3s ease-out;
    float:left;
    /* Font styles */
    color: #fff;
    font-size: 12px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

.form-1 input[type=submit]:hover{
    color:#000;
}

PS:我已经尝试将 [type=text] 和 [type=password] 的 css 分开，但仍然无法正常工作...

Answer 1

您的 jQuery.Placeholder 插件正在将您的密码 input 的 type 属性更改为 text 而不是 password为了正确显示占位符文本(仅当 native 浏览器不支持 HTML5 placeholder 属性时)。

因此在 IE 中你的这个 CSS 规则:

.form-1 input[type=password] { etc... }

没有得到应用。

将新的 .password 类应用于您的输入并相应地更改您的 CSS:

.form-1 input[type=password], .form-1 input.password {

 <input class="password" type="password" name='senha' placeholder="Senha" required />