没有日期选择器的html日期输入

Question

我有一个简单的日期输入

<input type="date" id="sign-up-dob" class="sign-inputs" max="2999-12-31"></input>

看起来像这样:

我如何去掉打开日期选择器右侧的箭头和内容。我只需要它，这样您就可以输入经过验证的日期，谢谢。

Answer 1

只需在文本输入上使用 pattern 属性:

input:invalid {
    color: red;
}

[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

<label>Input Date (YYYY-MM-DD):
<input type="text" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" />
</label>

<input type="date" />