Question

当我阅读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>

Answer 1

我没有在任何地方看到这个记录，但它让我烦恼所以我深入研究了SCSS，看看我能做些什么。不需要对CSS进行任何更改。我设法通过以下方式解决了这个问题：

将mdl-textfield--floating-label has-placeholder类添加到外部<div>元素。
向placeholder元素添加<input>属性，它可以包含值或保持为空;无论哪种方式，它仍然有效。

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

<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中创建带有固定标签的文本框？

1 个答案: