Question

我试图熟悉materializecss，目前正在使用登录框。问题是当我点击输入字段时，每个输入字段中的占位符标签都会向上移动。然而，这并没有发生，当我输入一些文本时，标签文本仍然存在。

This is how it looks like when I type something in the input box

这是我的html文件：

    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"]</title>

        <link rel="stylesheet" href="~/css/materialize.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <!--Import Google Icon Font-->
        <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="~/css/materialize.min.css" media="screen,projection" />
        <link href="css/layouts/page-center.css" type="text/css" rel="stylesheet" media="screen,projection">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <header>
        </header>
        <div class="section"></div>
        <main>

<div id="login-page" class="row">
    <div class="col l4 s12 z-depth-4 card-panel">
        <form class="login-form">
            <div class="row">
                <div class="input-field col s12 center">
                    <!--<img src="images/login-logo.png" alt="" class="circle responsive-img valign profile-image-login">-->
                    <p class="center login-form-text">Login test</p>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <i class="material-icons prefix">perm_identity</i>
                    <input id="username" type="text">
                    <label for="username">Username</label>
                </div>
            </div>
            <div class="row margin">
                <div class="input-field col s12">
                    <i class="material-icons prefix">lock_outline</i>
                    <input id="password" type="password">
                    <label for="password">Password</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m12 l12  login-text">
                    <input type="checkbox" id="remember-me" />
                    <label for="remember-me">Remember me</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <a href="index.html" class="btn waves-effect waves-light col s12">Login</a>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6 m6 l6">
                    <p class="margin medium-small"><a href="page-register.html">Register Now!</a></p>
                </div>
                <div class="input-field col s6 m6 l6">
                    <p class="margin right-align medium-small"><a href="page-forgot-password.html">Forgot password ?</a></p>
                </div>
            </div>

        </form>
    </div>
</div>

    </main>
        <footer class="page-footer">
        </footer>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/materialize.js"></script>
        @RenderSection("Scripts", required: false)
    </body>
    </html>

我缺少什么提示，以及如何解决这个问题？

Answer 1

试试这个：

<div class="container">

  <h2>Design in CSS3<small>Inputs</small></h2>

  <form>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Name</label>
    </div>

    <div class="group">      
      <input type="text" required>
      <span class="highlight"></span>
      <span class="bar"></span>
      <label>Email</label>
    </div>

  </form>



</div>

DEMO HERE

materializeCSS：动画标签不起作用

1 个答案: