MDL 日期占位符答案

【问题标题】：MDL date placeholderMDL 日期占位符
【发布时间】：2017-12-15 14:58:56
【问题描述】：

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

【问题讨论】：

标签： html css datetime material-design-lite

【解决方案1】：

MDL 有一个内置但尚未解决的解决方案：has-placeholder。这将使浮动标签固定，始终浮动

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

信用：@Jurgen How to create textbox with fixed label in Material Design Lite?

【讨论】：

【解决方案2】：

改为添加：

input::-webkit-datetime-edit{ color: transparent; }
input:focus::-webkit-datetime-edit{ color: #000; }

取自here

【讨论】：