select要素にplaceholderを付ける方法

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

りゅう

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

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

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

この記事でわかること

  • placeholderについて
  • select要素に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">選択肢1</option>
            <option value="2">選択肢2</option>
            <option value="3">選択肢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のように表示することは可能です。

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

web制作者はWordPressブログを始めましょう!
以下の記事で、WordPressブログをやるメリットについて解説しています。

おすすめのレンタルサーバーについては以下の記事で解説しています。

web制作者におすすめの書籍です。
CSS設計を学ぶとサイト設計の理解が深まり、保守性やカスタマイズ性の高いサイトを作ることができ、結果として制作効率を高めることができます。ぜひ一読ください。

CSS設計完全ガイド 詳細解説+実践的モジュール集/半田惇志
created by Rinker

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

京都で活動するweb制作者(プロフィール
WordPressサイトを中心にホームページ制作をしています。
HTML/CSS/Sass/JavaScript/jQuery/WordPress/PHP

コメント

コメントする

CAPTCHA