:has擬似クラスを使用して<select>要素にプレースホルダーを実装する方法

はじめに

<select>要素にはプレースホルダー属性がないですが、未入力の時に色を薄くするようなデザインは頻繁に使用します。

未入力の時のみテキストの色を変えるには、従来は

• <select>要素にrequiredを付与する

<select required>
    <option value="">未選択</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

select:invalid {
    color: gray;
}

• JavaScriptを使って現在の値が空文字列だったらcssを追加する

<select id="mySelect" class="placeholder">
    <option value="">未選択</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

.placeholder {
    color: gray;
}

const selectElement = document.getElementById('mySelect');

selectElement.addEventListener('change', () => {
    if (selectElement.value === "") {
        selectElement.classList.add('placeholder');
    } else {
        selectElement.classList.remove('placeholder');
    }
});

といった実装が多いかと思います。

しかし、CSSの:has擬似クラスを使えば、不要な属性やJavaScriptを使わずにプレースホルダーを実現できます。本記事では、<select>要素が未選択の時にプレースホルダーのように文字を薄くする方法について、サンプルコードを交えて説明します。

:has擬似クラスを使用した実装

<select>
    <option value="">未選択</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
</select>

select:has(option:checked[value=""]) {
    color: gray;
}

• :has擬似クラスは、親要素に特定の子要素が存在するかどうかをチェックします。

• option:checkedは、<select>要素の中で現在選択されている<option>要素を指します。

• option[value=""]は、value属性が空文字列の<option>要素を示します。

この組み合わせにより、現在選択されている<option>要素のvalue属性が空文字列の時、selectにプレースホルダーのスタイルを付与することができます。

注意点

• :has擬似要素はMDNのBaselineで2023 NEWLY AVAILABLEとなっており、最新のブラウザは全てサポートしていますが、古いバージョンのブラウザではサポートされない可能性があります。