带有浮动标签的材料设计选择答案

【问题标题】：Material design select with floating label带有浮动标签的材料设计选择
【发布时间】：2021-08-12 04:51:42
【问题描述】：

我需要在这个选择菜单中添加一个浮动标签。我找到了这个框架https://tronic247.com/material/，它似乎有一个选择组件但没有浮动标签，那么如何添加它/感谢您的帮助。

<!DOCTYPE html>
<html>
<head>
    <title>My Material design Web Page</title>
    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
    <!-- CSS at head -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <link href="https://res.cloudinary.com/tronic247/raw/upload/v1620900079/material.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container p-5">
            <label for="rating">Choose a rating</label>
<select  class="filled">
    <optgroup label="Good">
        <option value="5">5+</option>
        <option value="10">10+</option>
        <option value="" disabled="">10+</option>
    </optgroup>
    <optgroup label="Bad">
        <option value="1">1</option>
        <option value="2">2</option>
    </optgroup>
</select>
        </div>
        <!-- JS at footer for optimized loading -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://res.cloudinary.com/tronic247/raw/upload/v1620900084/material.min.js"></script>
    </body>
</html>

【问题讨论】：

标签： javascript jquery css material-design floating-labels

【解决方案1】：

据我从文档中可以看出，您使用的库没有浮动标签的选项。尝试使用其他具有浮动标签的库，例如 Material Design Lite 或其他内置此选项的库。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!-- Textfield with Floating Label -->

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>
<!-- Numeric Textfield with Floating Label -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
    <label class="mdl-textfield__label" for="sample4">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

【讨论】：