I am facing an issue while implementing a design from the CSS and HTML login form templates on my project.
Below is the snippet of my HTML:
<p id="firstname_line">
<label>First Name:</label>
<input type="text" name="firstname" id="firstname" required pattern="^[a-zA-Z]+$"><span title="Name should contain only letters!"></span>
</p>
And here is my CSS code:
#firstname_line input:invalid ~ span:after {
opacity: 1;
color:green;
}
#firstname_line input ~ span:after {
content:attr(title);
color:red;
margin-left:.6rem;
opacity: 0;
transition: 1s 1s opacity linear;
}
#firstname_line span {
color: red;
display: block;
}
However, when I try to integrate this example into my project, I encounter a strange problem across all browsers. Upon loading the page, if the input field is empty, it is being treated as ":valid", rather than ":invalid". Both classes #firstname_line input:invalid ~ span:after and #firstname_line input ~ span:after { are applied initially, causing the span element to be visible. In contrast to the expected behavior shown in the example, the span element shouldn't be visible on load.
Could someone kindly suggest where the issue might lie?