除键盘外，从<input type =“date”/>中删除所有样式和功能

Question

我一直有很多问题要弄清楚如何摆脱与<input type="date" />相关联的所有浏览器功能，但要将其保留为该类型，以便在移动设备上触发相应的软件键盘。

到目前为止：

::-webkit-datetime-edit-fields-wrapper { display: none !important; }
  ::-webkit-datetime-edit-text { display: none !important; }
  ::-webkit-datetime-edit-month-field { display: none !important; }
  ::-webkit-datetime-edit-day-field { display: none !important; }
  ::-webkit-datetime-edit-year-field { display: none !important; }
  ::-webkit-inner-spin-button { display: none !important; }
  ::-webkit-calendar-picker-indicator { display: none !important; }

这些似乎是与此输入类型相关联的所有值，但添加显示它们基本上都不会使输入无法使用，即没有文本或占位符可见。

Answer 1

  

如何摆脱与<input type="date" />

相关的所有浏览器功能

只读属性

任何表单元素都可以使用readonly属性。

示例：

<input type="date" readonly />

已禁用属性

任何表单元素都可以使用disabled属性。

示例：

<input type="date" disabled />

pointer-events：none;

对于它的价值，您还可以使用以下CSS为<input />设置样式：

pointer-events: none;

示例：

input['type="date"'] {
pointer-events: none;
}

<input type="date" />