Question

问题是我需要输入并且我有一些：当我尝试将值从空白中移出边界红色时，请关注那些相同的输入，当我点击它时我做了一个奇怪的绿色边框来自焦点和红色边框的必要可以帮助我在点击输入后删除所需的

				.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;
				}
				.forminputs{
					width : 100%;
					position : relative;
					margin :25px auto;
				}
				.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;
				}
				input[type="submit"]{
					position: relative;
					background-color:#50C878;
					width : 100px;
					height : 40px;
					font-family: 'Questrial',sans-serif;
					text-transform: uppercase;
					color: #FFF;
					font-weight: bold;
					font-size: 17px;
					cursor: pointer;
					border: none;
					border-radius: 5px;
					float:right;
					margin-bottom: 20px;
					margin-top:10px;
				}

			<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 palavra-chave" required/><br>
					<i class="fa fa-lock"></i>
				</section>
				<a href="#">Esqueceu a palavra-chave ?</a><br>
				<input type="submit" name ="entrar" value="Entrar"><br>
				<p> Nome de Utilizador e/ou<br> Palavra-chave incorreto(s)</p>
			</form>

Answer 1

不是问题的完整解决方案，但这里有一些有用的信息。

您可以使用：required和：CSS中的无效选择器来更改这些对象的样式。它们可以与其他选择器链接，例如输入：invalid：focus。这可以让你修改样式并删除双发光边框。

专注和要求

1 个答案: