Selectボックスの使いやすさを向上！プレースホルダー設定のメリットとデメリット

2024-04-02

HTML Selectボックスにプレースホルダーを設定する方法

disabled属性とselected属性を使う

最も簡単な方法は、disabled属性とselected属性を組み合わせて、最初のオプションをプレースホルダーとして表示する方法です。

<select name="country">
  <option value="" disabled selected>国を選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ合衆国</option>
  <option value="uk">イギリス</option>
</select>

このコードでは、最初のオプションにdisabled属性とselected属性を付与しています。disabled属性により、このオプションは選択できなくなります。selected属性により、このオプションが初期状態で選択された状態になります。

注意点

この方法は、IE10以下のブラウザではサポートされていません。
選択肢の中に、実際に"国を選択してください"という値を持つものがある場合、この方法が使えません。

CSSを使って、最初のオプションのスタイルを変更することで、プレースホルダーのように見せることができます。

<select name="country">
  <option value="">国を選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ合衆国</option>
  <option value="uk">イギリス</option>
</select>

select option:first-of-type {
  color: #ccc;
}

このコードでは、select要素の最初のoption要素に対して、colorプロパティを#cccに設定しています。こうすることで、最初のオプションがグレー色で表示されます。

この方法は、すべてのブラウザでサポートされているわけではありません。

JavaScriptを使って、select要素にプレースホルダーを設定することができます。

<select name="country"></select>

const select = document.querySelector('select[name="country"]');
const placeholder = document.createElement('option');
placeholder.textContent = '国を選択してください';
placeholder.value = '';
select.appendChild(placeholder);

select.addEventListener('change', () => {
  if (select.selectedIndex === 0) {
    placeholder.style.display = 'block';
  } else {
    placeholder.style.display = 'none';
  }
});

このコードでは、まずselect要素を取得します。次に、option要素を作成し、そのテキスト内容を"国を選択してください"に設定します。そして、select要素にoption要素を追加します。

最後に、select要素のchangeイベントにイベントリスナーを追加します。このイベントリスナーは、select要素の選択状態が変化したときに実行されます。選択状態が0番目のオプションの場合、プレースホルダーを表示します。それ以外の場合は、プレースホルダーを非表示にします。

この方法は、JavaScriptが有効になっているブラウザでのみ動作します。

どの方法を使うべきかは、プロジェクトの要件やブラウザのサポート状況によって異なります。

簡単な方法でプレースホルダーを実現したい場合は、disabled属性とselected属性を使う方法がおすすめです。
より多くのブラウザでサポートされている方法が必要な場合は、CSSを使う方法がおすすめです。
より柔軟な方法が必要な場合は、JavaScriptを使う方法がおすすめです。

disabled属性とselected属性を使う

<select name="country">
  <option value="" disabled selected>国を選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ合衆国</option>
  <option value="uk">イギリス</option>
</select>

CSSを使う

<select name="country">
  <option value="">国を選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ合衆国</option>
  <option value="uk">イギリス</option>
</select>

select option:first-of-type {
  color: #ccc;
}

JavaScriptを使う

<select name="country"></select>

const select = document.querySelector('select[name="country"]');
const placeholder = document.createElement('option');
placeholder.textContent = '国を選択してください';
placeholder.value = '';
select.appendChild(placeholder);

select.addEventListener('change', () => {
  if (select.selectedIndex === 0) {
    placeholder.style.display = 'block';
  } else {
    placeholder.style.display = 'none';
  }
});

実行方法

disabled属性とselected属性を使う

CSSを使う

この方法は、HTMLファイルとCSSファイルを用意する必要があります。

HTMLファイルにselect要素を記述します。
HTMLファイルとCSSファイルを同じフォルダに保存します。
HTMLファイルをブラウザで開きます。

JavaScriptを使う

selectボックスにプレースホルダーを設定するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがありますので、プロジェクトの要件やブラウザのサポート状況に合わせて最適な方法を選択してください。

selectボックスにプレースホルダーを設定する他の方法

placeholder属性を使う

HTML5では、select要素にplaceholder属性を指定することで、プレースホルダーを設定することができます。

<select name="country" placeholder="国を選択してください">
  <option value="">国を選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ合衆国</option>
  <option value="uk">イギリス</option>
</select>

aria-label属性は、アクセシビリティのために使用されます。この属性にプレースホルダーのテキストを指定することで、スクリーンリーダーなどの補助技術で読み上げることができます。

<select name="country" aria-label="国を選択してください">
  <option value="">国を選択してください</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ合衆国</option>
  <option value="uk">イギリス</option>
</select>