html - 从 <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; }

这些似乎是与此输入类型关联的所有值，但添加 display none 基本上会使输入不可用，即没有文本或占位符可见。

Answer 1

how to get rid of all browser functionality associated with <input type="date" />

只读属性

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

示例:

<input type="date" readonly />

---

禁用属性

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

示例:

<input type="date" disabled />

---

指针事件:无；

对于它的值(value)，您还可以为 <input /> 设置样式使用以下 CSS:

pointer-events: none;

示例:

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

<input type="date" />