Currently experimenting with integrating Styled Components to target the nearest span element.
<label>
<span className="">Password</span>
<input type="password" id="passwordInput" />
</label>
span {
position: absolute;
font-size: 14px;
height: 40px;
color: #a2a2a2;
line-height: 40px;
right: 0;
left: 8px;
cursor: auto;
}
input {
height: 40px;
padding-left: 8px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
border: 1px solid #dbdbdb;
background-color: #fafafa;
border-radius: 3px;
cursor: auto;
font-size: 16px;
&:focus {
& + span {
background-color: red;
}
outline: #a2a2a2;
border: 1px solid #a2a2a2;
}
}
Still figuring out the best approach, struggling with the current method that's not yielding the desired outcome. Ideally, I aim to make it function without assigning specific classes to the spans.