0

More than 5 years have passed since last update.

REALITY株式会社

【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使おう（使おう）

参考

0

Register as a new user and use Qiita more conveniently

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

0