Safari上のinput:dateの大きさを変えるのに少し手間取った話

# どういうことか

```<input type="date">```
```<input type="time">```
```<input type="datetime-local">```

これらの要素は大きさを`%`で指定したときに、想定した大きさになってくれませんでした。
これを解決するために行った内容の備忘録になっています。

# 結論

1. 最低限以下の内容を指定しましょう。
    ```css
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        -webkit-appearance: none;
        height: 1em;
    }

    input[type="date"]::-webkit-date-and-time-value,
    input[type="time"]::-webkit-date-and-time-value {
        text-align: left;
    }
    ```
2. ```<input type="datetime-local">```の左寄せは現状できなさそうです。

# 余談 解決までの流れ

## 初期状態

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        dd {
            font-size: 14px;
        }

        input[type="date"],
        input[type="time"],
        input[type="datetime-local"] {
            width: 50%;
        }
    </style>
</head>
<body>
    <dl>
        <dt>date</dt>
        <dd><input type="date"></dd>
        <dt>time</dt>
        <dd><input type="time"></dd>
        <dt>datetime-local</dt>
        <dd><input type="datetime-local"></dd>
    </dl>
</body>
</html>
```

このときのChrome (最終目標)
![localhost_8080_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303228/00717a72-2b68-787c-0c86-8079093b21c8.png)

このときのSafari
![6FB98ED8-1D1D-428F-AE9F-3F79D48FA04A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303228/951c358c-cdfd-4ba7-ae1a-5e9dfbeed01b.jpeg)


## 流れ

### ブラウザが定義したスタイルを解除した

```diff
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        dd {
            font-size: 14px;
        }

        input[type="date"],
        input[type="time"],
        input[type="datetime-local"] {
+            -webkit-appearance: none;
            width: 50%;
        }
    </style>
</head>
<body>
    <dl>
        <dt>date</dt>
        <dd><input type="date"></dd>
        <dt>time</dt>
        <dd><input type="time"></dd>
        <dt>datetime-local</dt>
        <dd><input type="datetime-local"></dd>
    </dl>
</body>
</html>
```

このときのSafari

![E46BCDC3-5141-4704-A0F3-A1607D0D94B8.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303228/d6545579-7b1a-2fe8-18de-7b03fa296a8c.jpeg)

![4290A9DA-C135-4E92-84D1-C2A2D84D9E23.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303228/4efe5056-c9e0-d11a-2ce0-6e43592bf1a2.jpeg)




ここでの問題点
- 値を入力していない状態のとき、文字サイズ分の高さがない

### 高さを指定した

親要素と同じ`font-size`になるように指定しています。

```diff
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"] {
            -webkit-appearance: none;
            width: 50%;
+            height: 1em;
        }
    </style>
</head>
<body>
    <dl>
        <dt>date</dt>
        <dd><input type="date"></dd>
        <dt>time</dt>
        <dd><input type="time"></dd>
        <dt>datetime-local</dt>
        <dd><input type="datetime-local"></dd>
    </dl>
</body>
</html>
```

このときのSafari

ここでの問題点
- valueの表示が中央寄せになっている

### valueの表示を左寄せにした

```diff
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style>
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"] {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 50%;
            height: 1em;
        }
+        input[type="date"]::-webkit-date-and-time-value,
+        input[type="time"]::-webkit-date-and-time-value,
+        input[type="datetime-local"]::-webkit-date-and-time-value {
+            text-align: left;
+        }
    </style>
</head>
<body>
    <dl>
        <dt>date</dt>
        <dd><input type="date"></dd>
        <dt>time</dt>
        <dd><input type="time"></dd>
        <dt>datetime-local</dt>
        <dd><input type="datetime-local"></dd>
    </dl>
</body>
</html>
```

このときのSafari

![80133B73-4465-48F5-AD16-5E7799D34708.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303228/92957cad-2e12-cb19-ba25-81986494620b.jpeg)



ここでの問題点
- `<input type="datetime-local">`が左寄せになっていない

# あとがき

Bugzillaで今回解決できなかった内容に関して探してみましたが、それらしき見つからなかったです。
あまり使う機会がない指定ではありますが、解決策が見つかったら追記しようと思います。

https://bugs.webkit.org/

firefoxも含めてサポートはしているようなので、このような癖が減ってくれると嬉しいところですね。