从< input type =” date”删除所有样式和功能。 />除了键盘 [英] Remove all styling and functionality from <input type="date" /> besides keyboard

问题描述

我一直在解决如何摆脱与< input type = date /> 相关联的所有浏览器功能方面遇到很多问题

I've been having a lot of issues figuring out how to get rid of all browser functionality associated with <input type="date" /> but keeping it as that type in order to trigger appropriate software keyboards on mobile.

到目前为止：

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

这些似乎都是与此输入类型相关联的所有值，但是添加显示基本上都不呈现输入不可用，即看不到任何文本或占位符。

These seem to be all values associated to this input type, but adding display none of them basically renders input unusable, i.e. no text or placeholders are visible.

推荐答案

如何摆脱所有浏览器与<输入类型=日期 />

只读属性

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

示例：

<input type="date" readonly />

---

已禁用属性

任何表单元素都可以接受禁用属性。

示例：

<input type="date" disabled />

---

指针事件：无；

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

pointer-events: none;

示例：

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

<input type="date" />

这篇关于从< input type =” date”删除所有样式和功能。 />除了键盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！