web関連

【javascript】selectボックスのoptionの最初の要素だけにcssを当てる方法

「選択してください」のみ色味を変えたかった時の備忘録

option要素の一番最初の要素のみ色を変える

option要素にcssを当てることはできず、selectボックスにcssを当てて調整する必要がある
以下はselectボックスの一番最初のoption要素が選ばれている時のみ実行される処理

// selectboxを取得(複数対応可)
var elements = document.querySelectorAll(".selectbox");
elements.forEach(elm => {
	// option要素を取得
	var options = elm.options;
	// 一番最初のoption要素が選択されている場合の条件分岐
	if(options.selectedIndex == "0"){
		// option要素にcssは聞かないのでselectボックスにcss指定
		elm.style.color = '#ccc';
	}
});

※このコードは読み込み時に一番最初の要素が選択されているかどうかを判別するもので、selectボックスの値を変更した場合には対応していません

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。