Materalize css：在浏览器自动填充时重叠的电子邮件和密码标签

Question

我正在使用materalize css登录和注册表单。在电子邮件和密码字段中， 我在注册和注册表单中都存在重叠问题。

<div class="row" style="margin-top: 21px;">
    <div class="input-field col s12">
        <input  id="email" type="email" class="validate" name="user_login" 
         required="" autocomplete="off" >
        <label for="email">Email Address</label>
    </div>
    <div class="input-field col s12">
        <input id="password" type="password" class="autofill validate" 
        name="password" required="">
        <a  class="forgot" href="{"auth.recover_password"|fn_url}">Forgot?</a>
        <label for="password">Password</label>
    </div>
</div>

在JS中

$(document).ready(function() {
    M.updateTextFields();
});

代码输出：https://prnt.sc/jmshv1

Answer 1

确保包含materialize js文件。包含js文件时，您的代码正在运行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

jsfiddle链接 - https://jsfiddle.net/eof64tuh/