<select> タグと自作ドロップダウンリスト HTML の <select> タグ(HTMLSelectElement)は制限が多く、ちょっと凝ったことをしようと思うとすぐ <select> では足りなくなります。たとえば、選択肢にテキストコンテンツ以外(アイコンなど)を含めたい、とか、フィルター用の入力ボックスをつけたい、とか、コンボボックスにしたい、とか。複数選択用の <select multiple> は、 PC ブラウザーで見るとポップアップではなく静的なリストボックスになり、 Ctrl + クリックなど複雑な操作が必要になるため扱いづらく、使われることは稀かと思います。 そこで独自ドロップダウンリストを実装することになるのですが、ちゃんと実装しようと思うと面倒です。 セマンティックマークアップ HTML タグ、 WAI-ARIA のロールやステートなど適切に指定します。 キー
![<selectmenu> タグできる子; <select> に代わるカスタマイズ可能なドロップダウンリスト](https://cdn-ak-scissors.b.st-hatena.com/image/square/fff5142b8b983b15115a87af0fdb62e155776b83/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2022%2F03%2Fselectmenu-example-1024x467.png)