セレクトボックスを複数列のドラムロール表示にしたい(iOS)

Question

セレクトボックスを複数列のドラムロールにしたい(iOS)

スマートフォン用のwebサイトで、
セレクトボックスのドラムロールを、複数列にする方法があるか、探しています。

イメージは、このような感じです。
この画面は、iPhoneX、 設定 > 一般 > 日付と時刻 > 自動設定オフ　で表示されます。

以下のような、通常のセレクトボックスでは、1列のみのドラムロールが作成されます。

<select name="example">
<option value="サンプル1">サンプル1</option>
<option value="サンプル2">サンプル2</option>
<option value="サンプル3">サンプル3</option>
</select>

また、以下のように2つ並べてみましたが、1列のみのドラムロールがそれぞれ作成され、
同時に選択はできませんでした。

<select name="example">
<option value="サンプル1">サンプル1</option>
<option value="サンプル2">サンプル2</option>
<option value="サンプル3">サンプル3</option>
</select>
<select name="example2">
<option value="サンプル1_">サンプル1_</option>
<option value="サンプル2_">サンプル2_</option>
<option value="サンプル3_">サンプル3_</option>
</select>

これを、画像と同様、年・月・日にわけて（なおそれぞれ同時に選択できる）表示にすることは、技術的に可能なのでしょうか。

また、このドラムロールでの表示に対応しているのは、iPhoneやiPadなどのiOSのみでしょうか。
Android端末でも同様の表示をする技術、コーディング方法などありましたら、あわせて教えていただきたいです。

どなたがご存知の方いらっしゃいましたら、ご教示いただけますと幸いです。
どうぞよろしくお願いいたします。

Answer 1

<select>ではなく、<input type="date">を使用するのはいかがでしょうか。

日付の入力欄を作成する

上記ページをiOS端末から閲覧して「ブラウザ上の表示」のプルダウンをタップすると、ドラムロールが表示され、「年・月・日」を個別に選択できることが確認できるかと思います。

手元にAndroid端末が無いので確信が持てないのですが、多くのAndroid端末はドラムロールではなくカレンダーで選択するようになっていたかと思います。
他にもっといい方法があるかもしれませんが…少しでもお役に立てれば。

Comments

[aruri]

そうです、こんなかんじです！
input type に date なんてものがあったんですね。勉強不足でございました...
実際には「日」の項目は必要ないとのことなので、<input type="month"> をカスタマイズしてみようかと思います。
回答もすぐにいただけてたいへん助かりました。ありがとうございました！