Input text disappear while hover and typing - css

Question

I can't seem to find the issue I'm using Gatsby and I created a Ref for handling form validation on the input, pretty basic stuff gone wrong for some reason
Here is the html:
<form onSubmit={(event) => handleSubmit(event, email)}>
<label htmlFor="email">Our newsletter</label>
<input
value={email || ''}
name="email"
placeholder="La tua e-mail"
type="text"
spellCheck="false"
className="input"
onChange={() => setEmail(myRef.current.value)}
ref={myRef}
/>
<button className="button" onClick={checkInput} type="submit">
Iscriviti
</button>
{message && (
<>
<br />
<small>{message.substring(0, 45)}</small>
</>
)}
</form>
These are the functions
const [message, setMessage] = useState();
const [email, setEmail] = useState('');
let myRef = useRef();
function handleSubmit(event, email) {
event.preventDefault();
addToMailchimp(email) // listFields are optional if you are only capturing the email address.
.then((data) => {
// I recommend setting data to React state
// but you can do whatever you want (including ignoring this `then()` altogether)
setMessage(data.msg);
})
.catch(() => {
// unnecessary because Mailchimp only ever
// returns a 200 status code
// see below for how to handle errors
});
}
const checkInput = () => {
console.log(myRef);
if (myRef.current.value === '') {
setErrorFor();
} else if (!isEmail(myRef.current.value)) {
setErrorFor();
} else {
setSuccessFor();
}
};
function setErrorFor() {
const formControl = myRef.current;
formControl.className = 'error shaka';
}
function setSuccessFor() {
const formControl = myRef.current;
formControl.className = 'success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
email
);
}
This is the CSS
form {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
width: 45%;
#media only screen and (max-width: 699px) {
width: 100%;
text-align: center;
}
label {
font-size: calc(1.3rem + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
text-transform: uppercase;
font-weight: bolder;
font-family: 'Acme', sans-serif;
letter-spacing: 0.1rem;
#media only screen and (max-width: 699px) {
text-align: center;
margin: 4rem auto 0 auto;
font-size: calc(2rem + (24 - 14) * ((100vw - 300px) / (1600 - 300)));
}
}
}
input {
width: 100%;
max-width: 320px;
min-width: 150px;
border: none;
padding: 0.5rem;
border-radius: 3px;
margin-top: 1rem;
height: 2.5rem;
font-size: 1rem;
color: black;
#media only screen and (max-width: 699px) {
width: 100%;
min-width: 100%;
}
}
.button {
height: 2.5rem;
border: 1px solid white;
margin-top: 1rem;
width: 100%;
max-width: 320px;
min-width: 150px;
cursor: pointer;
padding: 0.5rem;
border-radius: 3px;
background-color: cornflowerblue;
color: white;
font-size: 1.3rem;
font-family: 'Acme', sans-serif;
#media only screen and (max-width: 699px) {
width: 100%;
min-width: 100%;
}
}
.success {
border: 2px solid $maingreen;
}
.error {
border: 2px solid red;
}
.input {
z-index: 5;
outline: none;
:focus,
:hover {
outline: none;
text-rendering: optimizeLegibility;
text-indent: inherit;
z-index: 5000000000000000000000;
display: flex;
font-size: inherit;
color: inherit;
}
}
.input:hover {
z-index: 5;
color: inherit;
}
.shaka {
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
animation-duration: 1s;
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
}
Live example: don't know what that black border is, perhaps after validating it it works normally, same story on all browsers
If you ever notice the same problem happening to you, I would like to know what's happening. Thank you

Answer 1

I dont understand why u use z-index to the input,
remove that and the z-index in the input:hover

Answer 2

Disappearing text on hover for me I looks like it get the color from inherit, change inherit to a color like #000.
.input:hover {
z-index: 5;
color: inherit;
}