I am encountering an issue with required inputs and the :focus styling on those inputs. When I try to submit empty values, the red border from the required styling appears and does not disappear when I click on the input. As a result, I end up with a strange green border from the :focus styling and a red border from the required styling. Can someone help me figure out how to remove the required styling after clicking on the input?
.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>