Css 悬停和键入时输入文本消失

我似乎找不到我使用盖茨比的问题，我创建了一个Ref来处理输入上的表单验证，由于某种原因，一些非常基本的东西出错了

以下是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>

实例：不知道黑边框是什么，也许在验证它正常工作后，所有浏览器上的情况都是一样的

---

如果你注意到同样的问题发生在你身上，我想知道发生了什么。谢谢你

我不明白你为什么要用z-index来输入，

---

删除输入中的z索引：hover

消失hover上的文本对我来说我看起来像是从继承中获取颜色，将继承更改为类似#000的颜色

---

如果你使用的是铬合金，那么黑色边框是另一种与“聚焦”风格颜色从蓝色变为黑色不同的颜色。您可以使用CSS覆盖它：。我对Chrome改变东西以适应自己而不是遵循公认的、长期存在的标准感到恼火。哦，我明白了，这是Chrome的东西。。。我不认为这是个问题，但谢谢你@NathanielFlick

  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
    );
  }

 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);
      }
    }
  }

.input:hover {
      z-index: 5;
      color: inherit;
    }