如何在 Material Design Lite 中创建带有固定标签的文本框？

【问题标题】：How to create textbox with fixed label in Material Design Lite?如何在 Material Design Lite 中创建带有固定标签的文本框？
【发布时间】：2018-02-06 16:11:06
【问题描述】：

当我阅读 Material Design Lite 官方页面中的文档时，没有提到带有文本框的固定标签的类名。在 textarea 的情况下，他们有一个解决方案。但是类似下面的代码只是为input type = "text"创建占位符而不是标签。

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

【问题讨论】：

标签： material-design-lite

【解决方案1】：

我没有在任何地方看到这个文档，但这让我很烦，所以我深入研究了 SCSS，看看我能做什么。无需更改 CSS。我设法通过执行以下操作来解决它：

将mdl-textfield--floating-label has-placeholder 类添加到外部<div> 元素。
给<input>元素添加一个placeholder属性，它可以包含一个值或者保持为空；无论哪种方式，它仍然可以工作。

这将强制标签浮动在输入上方，而不是充当占位符。

<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>

【讨论】：

非常感谢，@Jurgen 这是一个合适的解决方案。