How can I add red borders to my form inputs only when they are invalid after submission, without displaying the red borders from the start? Currently, I am using the input:invalid selectors in CSS, but this causes the red borders to appear immediately. I want the red borders to show up only on invalid inputs that prevent successful form submission. My project involves Vue.js and here is a snippet of my code.
input,
textarea {
font-size: 14px;
padding: 7px;
filter: none;
&[type='email'],
&[type='password'],
&[type='text'],
&[type='search'] {
height: 20px;
font-family: inherit;
font-weight: bold;
border: 1.4px solid white;
border-radius: 3px;
background: #fff;
color: #002169;
transition: all 0.3s;
&:invalid {
border: 1.4px solid rgb(255, 18, 18);
}
&::placeholder {
color: #0378a6;
opacity: 1;
}
}
}