如何解决带有浮动标签的材料设计选择
我需要给这个选择菜单添加一个浮动标签。我找到了这个框架 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>解决方法
据我从文档中看到，您使用的库没有浮动标签选项。尝试其他一些具有浮动标签的库，例如 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
