I am currently developing my own website with a login feature that requires input tags of text-type. I would like to implement a functionality where clicking on these input tags will display a border, even when the mouse is not directly hovering over them.
I would appreciate any assistance on how to achieve this. Thank you in advance!
Edit:
HTML code
<form action="login.php" method="post">
<input class="login" name="user" type="text" placeholder="Username">
<input class="login_pw" name="password" type="password" placeholder="Password"><br>
<br><input class="submit" name="login" value="Log In" type="submit">
</form>
CSS code
.login {
width: 250px;
height: 40px;
color: white;
font-family: Arial;
font-size: 20px;
font-weight: bold;
text-align: center;
background-color: #2E2E2E;
border-bottom: 1px solid orange;
border-top: none;
border-left: none;
border-right: none;
}
.login_pw {
width: 250px;
height: 40px;
color: white;
font-family: Arial;
font-size: 20px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid orange;
border-top: none;
border-left: none;
border-right: none;
margin-left: 20px;
background-color: #2E2E2E;
}