Question

当我在释放鼠标时尝试专注于表单输入字段时，它不活动.. 我正在尝试一个三栏网页，其中表格在右侧面板..

表单的html代码 -

<div>

<div class="container">
<div class="login">
 <h3>Login Window</h3>
 <form method="post" action=" ">
 <p><input type="text" name="login" value="" placeholder="Username" class="logininput"></p>
    <p><input type="password" name="password" value="" placeholder="Password" class="logininput"></p>
    <p class="submit"><input type="submit" name="commit" value="Login" class="loginsubmit"></p>
  </form>
</div>
<div class="login-help">
  <p><a href="forgot.html">Forgot your password</a></p>
</div>
</div>  

</div>

我正在使用的CSS是 -

.container {margin:0;
width: 100%;
height:180px;}

.login{position:relative;
margin: 0 auto;
padding:0;
width:100%;
background: white;
border-radius: 3px;
}
.login h3{margin:0;
font-size: 15px;
font-weight: bold;
color: #555;
text-align: center;
text-shadow: 0 2px white;
background: #f3f3f3;
border-bottom: 1px solid #cfcfcf;border-radius: 3px 3px 0 0;
}
.logininput{width: 90%;
height: 30px;
margin: 4px 1px 4px 1px;
padding:0 10px;
color: #404040;
background: white;
border:1px solid #0076a3; 
border-top-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size: 14px;
}
.logininput:focus, .logininput:focus {border-color: #7dc9e2;  outline-color: #dceefc;    outline-offset: 0;}

.login p.submit {text-align: center;}
.login-help 
{margin: 20px 0px;
font-size: 11px;
font-weight:bold;
color: blue;
text-align:center;}
.login-help a{color: #515c64;text-decoration: none;}
.login-help a:hover{text-decoration: underline;}:-moz-placeholder {color: #c9c9c9  !important;font-size: 13px;}::-webkit-input-placeholder {color: #ccc;font-size: 13px;}
.loginsubmit{cursor:pointer;padding: 0 18px;
 height: 29px;
font-size: 12px;
font-weight: bold;
color: #527881;
text-shadow: 0 1px #e3f1f1;
background: #cde5ef;
border: 1px solid;
border-color: #b4ccce #b3c0c8 #9eb9c2;
border-radius: 16px;
background-image: -webkit-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -moz-linear-gradient(top, #edf5f8, #cde5ef);
background-image: -o-linear-gradient(top, #edf5f8, #cde5ef);
background-image: linear-gradient(to bottom, #edf5f8, #cde5ef);
}

.loginsubmit:active {cursor:pointer;
 background: #cde5ef;
 border-color: #9eb9c2 #b3c0c8 #b4ccce;
}

Answer 1

我在IE，Mozilla和Chrome上尝试过你的代码，它对我来说很好。当我在你的输入字段上集中并发布鼠标时，输入字段是活动的。我不知道你在哪里遇到问题。

登录表单输入未激活

1 个答案: