输入type=date在android上显示为空白

Question

我有一个输入类型=日期，当我打开我的智能手机(Android with google chrome)的页面时，输入显示空白，我没有时钟图标。你知道为什么吗?

<input type="date">

Answer 1

这是一个与浏览器之间不一致有关的问题。除了创建自己的标签/控件之外，您几乎没有其他选择，并使用它来代替浏览器默认的日期输入。这意味着它在所有支持的平台和设备上看起来是统一的。

我的方法(下面演示)是CSS-only，这意味着它使用没有JavaScript，这使得它干净，并消除了在动态创建元素时经常出现的任何实际问题。

CSS-only:

.date-picker {
display: inline-block;
background: rgba(40, 40, 250, .1);
min-width: 10rem;
min-height: 2rem;
padding: .5rem;
border-radius: .35rem;
position: relative;
isolation: isolate;
}
.date-picker,
.date-picker>* {
cursor: text;
font-size: 1.2rem;
}
.date-picker:hover {
background: rgba(40, 40, 250, .28);
}
.date-picker:active {
background: rgba(40, 40, 250, .2);
}
.date-picker:focus>input[type="date"],
.date-picker:focus-within>input[type="date"] {
color: #00f;
}
.date-picker:focus,
.date-picker:focus-within {
box-shadow: 0 0 0 .1rem #00f;
}
.date-picker>.placeholder::after {
content: "Click for calender";
pointer-events: none;
position: absolute;
inset: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
color: #222;
}
.date-picker:focus>.placeholder,
.date-picker:focus-within>.placeholder,
.date-picker>input[type="date"]:valid+.placeholder {
display: none;
}
.date-picker>input[type="date"] {
background: none;
border: none;
outline: none;
color: transparent;
font-family: serif;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.date-picker>input[type="date"]:valid {
color: #00f !important;
}

<div class="date-picker" tabindex="0">
<input type="date" required>
<div class="placeholder"></div> 
</div>