Remove all styling and functionality from <inpu

问题:

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.

So far:

::-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.

回答1:

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

readonly attribute

Any form element can take a readonly attribute.

Example:

<input type="date" readonly />

---

disabled attribute

Any form element can take a disabled attribute.

Example:

<input type="date" disabled />

---

pointer-events: none;

For what it's worth you can also style your <input /> with the following CSS:

pointer-events: none;

Example:

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

<input type="date" />