More than 5 years have passed since last update.

【HTML/CSS】日付の入力欄<input type="date">の▼部分（カレンダー表示ボタン）のクリック範囲を大きくする

Last updated at 2018-07-21Posted at 2018-07-21

特に使うときないと思うけど<input type="date">の▼部分のクリック範囲をでかくする

コード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        input[type=date]::-webkit-calendar-picker-indicator {
            /* 好きなだけpx調整 */
            padding: 20px;
        }
    </style>
</head>

<body>
    <input type="date">
</body>

</html>

CodePen

See the Pen input type date css by sola (@sola-msr) on CodePen.

おわり

CSS素人だから変なこと書いてたらごめんね
もうあきらめてJqueryの拡張プラグインとかflatpickr使おう（使おう）

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up