It appears that you have discovered an intriguing issue within Firefox.
A. Here is a suggested solution
SIMPLY: Avoid using whitespace: pre-wrap with
<input type="date">
or
<input type="time">
. There is no need for it... and evidently, the browser developers did not anticipate anyone doing so, as this behavior has not been identified by the developers yet.
It is truly difficult to fathom any reason or scenario where the property whitespace: pre-wrap would be necessary for that element. The date does not automatically go to the next line on its own.
B. The rationale behind your inquiry
Elements with integrated functionalities like date-/time-picker contain additional hidden internal elements. For <input type="date", the typically unseen structure is as follows:
<div id="input-box-wrapper" class="datetime-input-box-wrapper">
<span id="edit-wrapper" class="datetime-input-edit-wrapper"></span>
<button id="reset-button" class="datetime-reset-button"></button>
</div>
// You can view this normally hidden structure in Firefox using the developer tools
// when 'white-space: pre-wrap' is applied to the element ...
The CSS for these elements is located within the browser's integrated styles, which are typically inaccessible for modification via css/js. Particularly in Firefox, there is no intended method by the developers to remove the date/time behavior in Firefox entirely.
If you prefer not to utilize the browser's integrated mechanism in Firefox, consider using a text field and incorporating a date picker extension such as jQuery. (This could serve as a workaround for you as well!?)
Additionally, here is the browser's integrated CSS for the concealed elements:
// file: datetimebox.css
// These can also be viewed in Firefox dev tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
@namespace url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");
.datetimebox {
display: flex;
/* TODO: Enable selection once bug 1455893 is fixed */
user-select: none;
}
.datetime-input-box-wrapper {
display: inline-flex;
flex: 1;
background-color: inherit;
min-width: 0;
justify-content: space-between;
align-items: center;
}
.datetime-input-edit-wrapper {
overflow: hidden;
white-space: nowrap;
flex-grow: 1;
}
.datetime-edit-field {
display: inline;
text-align: center;
padding: 1px 3px;
border: 0;
margin: 0;
ime-mode: disabled;
outline: none;
}
.datetime-edit-field:not([disabled="true"]):focus {
background-color: Highlight;
color: HighlightText;
outline: none;
}
.datetime-edit-field[disabled="true"],
.datetime-edit-field[readonly="true"] {
user-select: none;
}
.datetime-reset-button {
color: inherit;
fill: currentColor;
opacity: .5;
background-color: transparent;
border: none;
flex: none;
padding-inline: 2px;
}
svg|svg.datetime-reset-button-svg {
pointer-events: none;
}
Bringing it all together:
The underlying issue lies in the integrated element .datetime-reset-button. Prove it for yourself: applying white-space: pre-wrap to the input causes the reset button wrapper element to expand in height. By directly adding a display: none (in Firefox) to that element in the browser's integrated style, the behavior of the input element is altered, restoring it to its normal size.
Therefore, - white-space: pre-wrap alters the behavior of the field and reserves space for sequences of whitespace (for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space). Typically, the display: inline-flex property from the parent element of the reset-button-container allows the container to flow inline and move to the next line. With wrap set, the button appears on the following line beneath the input field. (This observation also appears to be a bug.) However, with pre-wrap, this flow is disrupted, causing the button to be compressed within the field... leading to its increased height.