自动对焦删除

Question

我有一个表格，我想做一个焦点css问题是密码输入我无法禁用自动对焦我尝试了一切，autofocus =“关闭”，autofocus =“假”但是没有工作我在这里搜索其他答案并没有一个能解决我的问题

				* {
					margin : 0;
					padding : 0;
					border : 0;
				}

				body {
					background-color: #eee;
				}

				.form-login {
					width : 400px;
					height: auto;
					position : absolute;
					padding : 10px 25px;
					background-color: #ddd;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);
					border: none;
					border-top-right-radius: 5px;
					border-top-left-radius: 5px;
				}
				.login-logo {
					width: 125px;
					height : 125px;
					position: relative;
					border-radius : 125px;
					background: #ddd;
					margin: 0 auto;
					margin-top: 20px;
				}
				.input {
					width: 100%;
					height: 50px;
					background:gray;
					position: relative;
					margin:15px auto;
				}

				input[type="text"],
				input[type="password"]{
					width:100%;
					height:50px;
					position: relative;
					outline :none;
					border:1px solid gray;
					border-radius: 3px;
					font-size:16px;
					font-family: 'Questrial',sans-serif;
					padding-left: 30px;
  				    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   				    box-sizing: border-box;         /* Opera/IE 8+ */
				}
				input[type="text"]:focus, input[type="password"]{
					border:2px solid #50C878;
				}

<section class="container">
	<section class="form-login">
		<section class="login-logo">
			<img src="img/login-logo.png">
		</section>
			<form class="form" name="form" method="post" action="login-m.php">
				<section class ="input">
					<input type="text" name="utilizador" value="" placeholder="Insira o nome de utilizador"  required/><br>
					<i class="fa fa-user"></i>
				</section>		
				<section class ="input">	
					<input type="password" name="palavrachave" value="" placeholder="Insira a sua palavra-chave" autofocus="off"  required/><br>
					<i class="fa fa-lock"></i>
				</section>
				<a href="#">Esqueceu a palavra-chave ?</a>
				<p> Nome de Utilizador e/ou Palavra-chave incorreto(s)</p>
				<input type="submit" name ="entrar" value="Entrar">
			</form>
	</section>
</section>

Answer 1

问题不在于自动对焦。从HTML中删除auto-focus。

这是给你绿色边框的CSS。。

input[type="text"]:focus, input[type="password"]:focus{
    border:2px solid #50C878;
}

因为，首先您要向password field申请边框，然后获得green color。

以下是您解决的代码段

* {
					margin : 0;
					padding : 0;
					border : 0;
				}

				body {
					background-color: #eee;
				}

				.form-login {
					width : 400px;
					height: auto;
					position : absolute;
					padding : 10px 25px;
					background-color: #ddd;
					left: 50%;
					top: 50%;
					transform: translateX(-50%) translateY(-50%);
					border: none;
					border-top-right-radius: 5px;
					border-top-left-radius: 5px;
				}
				.login-logo {
					width: 125px;
					height : 125px;
					position: relative;
					border-radius : 125px;
					background: #ddd;
					margin: 0 auto;
					margin-top: 20px;
				}
				.input {
					width: 100%;
					height: 50px;
					background:gray;
					position: relative;
					margin:15px auto;
				}

				input[type="text"],
				input[type="password"]{
					width:100%;
					height:50px;
					position: relative;
					outline :none;
					border:1px solid gray;
					border-radius: 3px;
					font-size:16px;
					font-family: 'Questrial',sans-serif;
					padding-left: 30px;
  				    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   				    box-sizing: border-box;         /* Opera/IE 8+ */
				}
				input[type="text"]:focus, input[type="password"]:focus{
					border:2px solid #50C878;
				}

<section class="container">
	<section class="form-login">
		<section class="login-logo">
			<img src="img/login-logo.png">
		</section>
			<form class="form" name="form" method="post" action="login-m.php">
				<section class ="input">
					<input type="text" name="utilizador" value="" placeholder="Insira o nome de utilizador"  required/><br>
					<i class="fa fa-user"></i>
				</section>		
				<section class ="input">	
					<input type="password" name="palavrachave" value="" placeholder="Insira a sua palavra-chave"   required/><br>
					<i class="fa fa-lock"></i>
				</section>
				<a href="#">Esqueceu a palavra-chave ?</a>
				<p> Nome de Utilizador e/ou Palavra-chave incorreto(s)</p>
				<input type="submit" name ="entrar" value="Entrar">
			</form>
	</section>
</section>

Answer 2

试试这个： - 删除autofocus="off"，如下所示

<input type="password" name="palavrachave" value="" 
 placeholder="Insira a sua palavra-chave" required/>

将密码样式更改为

input[type="text"]:focus, 
input[type="password"]:focus{
    border:2px solid #50C878;
}