select要素にplaceholderを付ける方法

select要素にplaceholderを付ける方法について解説します。

りゅう

placeholderがあると視覚的にわかりやすいです。

実は、コンタクトフォームなどに使用するselect要素には、placeholder属性を指定できません。

今回はJavaScriptを使用して、placeholderのように表示にします。

placeholderとは

placeholderとは、input要素やtextare要素のテキストフィールドに表示する初期表示です。

placeholder属性を指定することで、指定した文字列を初期表示として表示できます。

<input type="text" placeholder="文字を入力してください">

文字を入力すると初期表示が消え、何も入力がなければ初期表示となります。

placeholder属性を指定して入力例などを表示させることで、ユーザーが何を入力したらよいかわかりやすくすることができます。

select要素にplaceholderを付ける方法

placeholder属性を指定することで、テキストフィールドをわかりやすくできることはお伝えしました。

しかし、select要素にはplaceholder属性を指定することはできません。
そのため、別の方法でplaceholderのように初期値を表示させます。

JavaScriptを使用し、文字色を変更する動きを付けることでplaceholderのように表示できます。

See the Pen プレイスホルダー by 竜貴族 (@czuqbsxm-the-selector) on CodePen.

<form action="" method="post" class="form">
    <div class="form-item">
        <label for="select">セレクトボックス</label>
        <select type="select" name="" id="select" class="select">
            <option value="0" disabled selected>選択してください</option>
            <option value="1">選択肢１</option>
            <option value="2">選択肢２</option>
            <option value="3">選択肢３</option>
        </select>
    </div>
    <!-- /.form-item -->
</form>

$(function(){
	$('#select').on('change', function(){
        if($(this).val() == "0"){
            $(this).css('color','#CCC')
        } else {
            $(this).css('color','#1A1A1A')
        }
    });
});

option要素でplaceholderにしたい選択肢を作成し、selected属性で選択状態にします。
また、disabled属性も指定することで選択できなくします。

JavaScriptでは、select要素に変更があれば関数が実行されるようにします。

if文でvalue属性の値が0のときとそれ以外のときで文字色を変えます。

value属性の値が0のときの文字色は、placeholderの文字色とします。
他にinput要素などがある場合は、文字色を揃えるように設定しましょう。

これでplaceholderのように初期表示を表現できます。

また、option要素にdisplay: none;を指定すると、選択肢に表示されないようにできます。

select要素をわかりやすくするために上記のコードを参考にしてください。

まとめ

select要素にplaceholderを付ける方法について解説しました。

select要素にplaceholder属性は指定できませんが、JavaScriptで文字色を制御することで、placeholderのように表示することは可能です。

ぜひ参考にしてください。