Bug 198959 - input[type=date] with empty value has shrunken height
Summary: input[type=date] with empty value has shrunken height
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 12
Hardware: iPhone / iPad iOS 12
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2019-06-18 03:33 PDT by roman.balaban
Modified: 2023-09-20 02:25 PDT (History)
12 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description roman.balaban 2019-06-18 03:33:29 PDT
The input[type=date] element with empty value has shrunken height on iOS.
You can check this using this markup:
<input type="date">

and the following CSS rule:
input {
  -webkit-appearance: none;

See the https://jsfiddle.net/go9b61L0/ example on iOS device.
Comment 1 Radar WebKit Bug Importer 2019-06-18 07:04:48 PDT
Comment 2 Martijn Cuppens 2020-10-29 03:07:57 PDT
This is fixable by adding a height to the `::-webkit-date-and-time-value` pseudo element.

input::-webkit-date-and-time-value {
  height: 1.5em;

This also happens to the `::-webkit-inner-spin-button` pseudo element as I noticed here (https://opensource.apple.com/source/WebCore/WebCore-7602.4.6/css/html.css.auto.html).