html - MDL 日期占位符

Question

我正在使用 MDL - getmdl.io 版本 1.3.0

我在让日期表单域执行我想要的操作时遇到问题。它不仅显示标签字段，还显示默认的占位符 <input type="date"> .

理想情况下，我不想展示这个。但是，如果必须的话，我怎样才能将标签放在表单域旁边呢？

代码

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--6-col">
    <input class="mdl-textfield__input" type="date" id="date">
    <label class="mdl-textfield__label" for="date">Date</label>
  </div>

我的 CSS 试图隐藏默认占位符。

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]),
::-webkit-datetime-edit-text {
  color: transparent;
}

Answer 1

MDL 有一个内置但未记录的解决方案:has-placeholder。这将使 float 标签固定，始终 float

添加mdl-textfield--floating-label has-placeholder 类到外部元素。

来源:@Jurgen How to create textbox with fixed label in Material Design Lite?