【HTMLサンプル付き】スマホで select multipleが表示されない？原因と解決策を徹底解説

複数選択を必要とするフォームでは <select multiple> を使うのが定番ですが、
スマホで表示されなかったり、選択できないというトラブルに遭遇したことはありませんか？

この記事では、その原因とHTMLサンプル付きでのスマホ対応の3つの解決策をご紹介します。

なぜスマホで <select multiple> が動かないのか？

まずは以下のようなコードを見てください。

<select id="customSelect" name="sample" multiple>
  <option value="サンプル01">サンプル01</option>
  <option value="サンプル02">サンプル02</option>
  <option value="サンプル03">サンプル03</option>
  <option value="サンプル04">サンプル04</option>
  <option value="サンプル05">サンプル05</option>
  <option value="サンプル06">サンプル06</option>
</select>

このように multiple 属性を付ければ、デスクトップではCtrlやShiftキーを使って複数選択できます。

しかし、スマホでは以下のような問題が起こります：

• タップしても複数選択ができない
• 選択状態が切り替わらない
• 一部端末ではリスト自体が開かない

これは、モバイルブラウザが**<select multiple> のネイティブUIを提供していないため**です。

解決策①：チェックボックスに切り替える（最も確実）

モバイル対応を優先するなら、チェックボックス形式に置き換えるのがベストです。

✔ チェックボックス版サンプルHTML：

<div class="custom-multiselect">
  <label><input type="checkbox" name="sample[]" value="サンプル01">サンプル01</label><br>
  <label><input type="checkbox" name="sample[]" value="サンプル02">サンプル02</label><br>
  <label><input type="checkbox" name="sample[]" value="サンプル03">サンプル03</label><br>
  <label><input type="checkbox" name="sample[]" value="サンプル04">サンプル04</label><br>
  <label><input type="checkbox" name="sample[]" value="サンプル05">サンプル05</label><br>
  <!-- 以下略 -->
</div>

特徴

• すべての端末で安定して動作
• タップ操作に最適
• スタイリングも自由自在

解決策②：ライブラリを使ったカスタムUIに変更

jQueryやモダンJSのセレクトライブラリを使うことで、モバイルでも快適に複数選択が可能です。

✔ Choices.js を使ったHTMLサンプル：

<!-- CDN読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

<!-- セレクトボックス -->
<select id="customSelect" name="sample[]" multiple>
  <option value="サンプル01">サンプル01</option>
  <option value="サンプル02">サンプル02/option>
  <option value="サンプル03">サンプル03</option>
</select>

<!-- 初期化スクリプト -->
<script>
  new Choices('#customSelect', {
    removeItemButton: true,
    placeholderValue: '選択してください'
  });
</script>

特徴

• タップで選択・解除できる
• 削除ボタン付きのタグUIに変化
• フォーム送信時には name="LEADCF3[]" として複数値が送られる

解決策③：デバイスによって出し分ける

JavaScriptでスマホかPCかを判定し、それに応じて表示UIを出し分ける方法もあります。

✔ 判定＆出し分け例：

<div id="pcUI">
  <!-- PC向け select multiple -->
  <select id="customSelectPC" name="LEADCF3[]" multiple>
    <option value="サンプル01">サンプル01</option>
    <option value="サンプル02">サンプル02</option>
  </select>
</div>

<div id="mobileUI" style="display:none;">
  <!-- スマホ向けチェックボックス -->
  <label><input type="checkbox" name="sample[]" value="サンプル01">サンプル01</label><br>
  <label><input type="checkbox" name="sample[]" value="サンプル02">サンプル02</label><br>
</div>

<script>
  const isMobile = /iPhone|Android.+Mobile/.test(navigator.userAgent);
  document.getElementById('pcUI').style.display = isMobile ? 'none' : 'block';
  document.getElementById('mobileUI').style.display = isMobile ? 'block' : 'none';
</script>

特徴

• 両方のUIを併用可能
• CSSやJavaScriptで柔軟に制御可能

NGパターン：mousedown で制御する

一部では下記のようなコードが紹介されていますが、スマホでは非推奨です。

document.getElementById('customSelect').addEventListener('mousedown', function(e) {
  e.preventDefault(); // 通常動作を無効に
  const option = e.target;
  if (option.tagName.toLowerCase() === 'option') {
    option.selected = !option.selected;
  }
});

これはPCでは動いても、スマホでは mousedown が発火しないことが多く、UXが不安定になります。

まとめ

方法	スマホ対応	実装難易度	推奨度
チェックボックス形式	◎	◎	★★★
カスタムUI（Choices.js等）	◎	△	★★☆
デバイス判定で切替	◎	△	★★☆
mousedownで制御	×	△	★☆☆

開発者メモ

• スマホ対応フォームでは見た目の統一より操作性を優先すべきです。
• <select multiple> はモバイルでの実用性に限界があるため、カスタム対応が基本となります。

結論

スマホで <select multiple> を使うのは非推奨。
チェックボックスやセレクトライブラリで代替しよう。

シンプルで確実なUIに切り替えることで、ユーザーの離脱や誤操作を防ぐことができます。

Favorite