时间戳

首页 > 解决方案 > 使用 google material design lite 创建像 Gmail 这样的浮动文本框

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

问题描述

我正在使用 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>

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

在此处输入图像描述

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

在此处输入图像描述

有没有办法创建这个设计？

标签： htmlcssmaterial-designmaterial-design-lite

解决方案

尝试使用 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>

推荐阅读