首页 > 解决方案 > 物化 css:电子邮件和密码标签在浏览器自动填充上重叠

问题描述

我正在使用 matralize 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

在此处输入图像描述

标签: jquerymaterialize

解决方案


确保包含具体化 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/

在此处输入图像描述


推荐阅读