材料设计 select 带浮动 label
[英]Material design select with floating label
问题描述
I need to add a floating label to this select menu.
我需要在这个 select 菜单中添加一个浮动 label。 I found this framework https://tronic247.com/material/ and it seem to have a select component but no floating label, So how to add it / Thanks for any help.我发现这个框架https://tronic247.com/material/它似乎有一个 select 组件但没有浮动 label，所以如何添加它/感谢任何帮助。
<,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>
1 个解决方案
解决方案1
0 2021-05-24 12:29:00
As far as I can see from the documentation, the library you use does not have an option for floating labels.据我从文档中可以看出，您使用的库没有浮动标签的选项。 Try some other library that does have floating labels, like Material Design Lite or another that has built-in this option.尝试一些其他具有浮动标签的库，例如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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.