optionを選択したらselectタグの文字色を変更する

Question

https://kodocode.net/design-css-selectlist/

上記のサイトの一つ目のプルダウンメニューを作成したのですが、placeholderでない時にテキストのカラーを変更する処理ができません。

ほかのinputタグなどには普通に指定出来たのですが、こちらのプルダウンのカラーは変更できませんでした。

::placeholderで色を指定してみたり、jQueryのchengeイベントで指定をしてみたのですが、変更されませんでした。
どのように指定すれば変更できるのでしょうか。

どなたかご教授お願い致します！

Comments

[runnynose]

試したコードを質問欄へお願いします。

[itsuitsuki01010]

.custom-select-trigger::placeholder {
処理
}

$(".custom-select-trigger").on("change", function() {
処理
});

.custom-select-trigger:invalid {
処理
}

などを指定しました。
あとはplaceholderからではなく初期値をoptionタグにて表示しようとしたのですが、undefindと出てきて正しく表示されませんでした。。

宜しくお願い致します！

[runnynose]

実際に動かしてみたコードをいただきたかったのですが。。。^^;
でもたぶやりたいこと、わかりました！

[itsuitsuki01010]

プルダウンメニューのoptionを選択するとメニューに表示されている文字色が変わるという処理をしたいといった感じです。

ご教授いただけると幸いです！

Answer 1

selectタグにはplaceholderは存在しません。
でもoptionタグの先頭によく「選択してください」などの文字を入れることはありますね。
optionタグの最初の要素をセレクタで掴みたいのであれば、以下のようにすると良いと思いますよ。

select option:first-child

Comments

[runnynose]

セレクタを制することでシンプルにUIを実現することができるので、ぜひ覚えてみてください^^
https://webliker.info/07370/