文本框由我的材料表单中的跨度覆盖。为什么？

Question

我为我的网站制作了一个重要的登录和注册表单，例如Google的（较旧的）文本框。问题是，当我写入文本框然后单击它旁边时，跨度会覆盖文本框文本，使其看起来不太好。

以下是链接：https://b-o-p.000webhostapp.com

以下是截图：

代码段：

<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" autocomplete="on">
  <div class="group">
    <input id="tb" name="email" type="email"><span class="highlight"></span><span class="bar"></span>
    <label id="txt">Email</label>
  </div>
  <div class="group">
    <input id="tb" name="password" type="password"><span class="highlight"></span><span class="bar"></span>
    <label id="txt">Password</label>
  </div>
  <button name="btn-login" type="submit" class="formbutton buttonBlue">Login
    <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
  </button>
  <h4 onclick="document.getElementById('id03').style.display='block'">Forgot password?</h2>
</form>

Answer 1

看起来您的form.js文件引发了控制台错误。

将 添加到当前<script></script>标记

。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

编辑; Plnkr Working example

Answer 2

您可以使用CSS伪类检查文本框是否有有效输入。

.your_password_input_class:valid + .your_span_class {
    display:none;
}