input[name="fname"] { margin: 0 0 0 5px; }
input:not(:focus):not(:placeholder-shown):valid + .input-group-text { background: green; color:white;border-color:green;}input:focus:not(:placeholder-shown):valid + .input-group-text { background: green; color:white;border-color:green;} input:not(:focus):not(:placeholder-shown) + .input-group-text { background: yellow; color:black;border-color:red; animation:horizontal-shaking 0.69s;}input:not(:placeholder-shown):focus + .input-group-text { background: yellow; color:black;}input:not(:focus):not(:placeholder-shown):valid {
border-style: dotted;
border-color: green;
animation: bounce 0.5s;
}input:invalid:not(:placeholder-shown){
border-style: dotted;
border-color: yellow;
}input:not(:focus):not(:placeholder-shown):invalid{
border-style: dotted;
border-color: red;
} .input-group + .input-group-text { float: left;}
@keyframes horizontal-shaking {
0% { transform: translateX(0) }
25% { transform: translateX(5px) }
50% { transform: translateX(-5px) }
75% { transform: translateX(5px) }
100% { transform: translateX(0) }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hireme Ceo</title>
<!-- bootstrap CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
# Is there a way to make this first input work like the second input
while still maintaing its current span position.
If you notice the input, the span background color changes upon form validation #
<div class="form-group">
<label>Name:</label>
<div class="input-group col-2" id"left">
<span class="input-group-text" id"left">
<i class="fa-solid fa-user"></i></span>
<input type="email" class="form-control"
placeholder="Enter Your Username"
autocomplete="off" required="required" id="fname"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
title="Enter valid email address" name="username">
</div>
</div> <br>
# this second input feild works fine,
i want the first input to behave like this
and have the span bg color change #
<div class="form-group">
<label>Name:</label>
<div class="input-group col-2" id"left">
<input type="email" class="form-control"
placeholder="Enter Your Username"
autocomplete="off" required="required" id="fname"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
title="Enter valid email address" name="username">
<span class="input-group-text" id"left">
<i class="fa-solid fa-user"></i></span>
</div>
</div>
</body>