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

这些似乎是与此输入类型关联的所有值，但添加显示 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 />

指针事件：none；

对于它的价值，您还可以使用以下 CSS:

来设计您的 <input />

pointer-events: none;

示例：

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

<input type="date" />

从 <input type="date" /> 中删除键盘以外的所有样式和功能

Remove all styling and functionality from <input type="date" /> besides keyboard

html

css

forms

datetime

webkit

只读属性

禁用属性

指针事件：none；