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

Question

当我阅读 Material Design Lite 官方页面中的文档时，没有提到带有文本框的固定标签的 class 名称。对于文本区域，他们有一个解决方案。但是像下面这样的代码只是为 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>

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

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

How to create textbox with fixed label in Material Design Lite?

material-design-lite