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
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-06-18 03:33 PDT by roman.balaban
Modified: 2023-09-20 02:25 PDT (History)
12 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

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 
<rdar://problem/51847712>
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).