使用 google material design lite 创建像 Gmail 这样的浮动文本框答案

【问题标题】：Create floating text box like Gmail using google material design lite使用 google material design lite 创建像 Gmail 这样的浮动文本框
【发布时间】：2020-07-08 12:22:56
【问题描述】：

我正在使用 Material design lite 库并尝试创建一个浮动文本框，就像谷歌为 Gmail 提供的那样。我没有找到该组件的任何文档，但是我尝试了以下代码

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
     <input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
     <label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>

这会创建一个类似这样的设计

我正在尝试设计类似这样的文本框

有什么方法可以创建这个设计吗？

【问题讨论】：

标签： html css material-design material-design-lite

【解决方案1】：

这是我创建的：

<div id="googleLogIn" style="position:absolute;">
 <input type="text" style="border:6px solid blue;height:35px;width:300px;position:absolute;top:50px;" 
 placeholder="">
 <p style="background-color:white;width:100px;position:absolute;left:20px;top:25px;padding:3px;">
 Email or phone</p>
</div>

它使某些东西接近你想要的。

【讨论】：

【解决方案2】：

尝试使用 HTML 标签 feildset 和 legend：

<span style="font-family:arial;font-size:.9em">
    <fieldset style="width:300px;border-color:blue;border-radius:5px;padding:10px">
    <legend style="color:blue">&nbsp;Email or phone&nbsp;</legend>
    <input type="text" style="border:0;font-size:2em">
    </fieldset><br>
</span>
<span style="font-family:arial;color:blue;font-weight:bold">Forgot email?</span>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助、质量更好，并且更有可能吸引投票