「カレンダーの日付を選択する方法がわからない」など問い合わせが多いので、そのヒントとして、数字をタップして選択する方法について説明します。

数字をタップして選択する箇所は、HTML + CSSのみで実現できます。

通常、ラジオボタンをそのまま表示すると、以下のように表示されます。

この状態では数字をタップして選択できないので、ラジオボタンのスタイルを以下のように指定します。

数字の上に透明なラジオボタンが置かれた状態になります。
数字をタップすると、透明なラジオボタンが選択された状態となります。
あとは擬似クラス:active・:checkedで押された・選択された状態に見せれば、数字をタップして選択が実現できます。

index.html

style.css

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

新品価格
¥2,486から
(2020/1/27 23:00時点)

【Monaca】Onsen UIで数字をタップして選択する
Tagged on: