Webkit-appearance属性をnoneに設定した後、背景画像(矢印)を選択ボックスに設定しました。オプションリストを開いたら、別の背景画像を表示したい(上向き矢印)。それに疑似クラスまたは何かがありますか?調査中に何も見つかりませんでした...
HTMLのselect
要素がCSSまたはJavaScriptを使用して開かれているかどうかを検出することはできません。
カスタムドロップダウンの矢印記号をカスタマイズする場合、最適なオプションは、非表示のselect
要素にマップするカスタムドロップダウンコンポーネントを使用することです。
:focus
疑似クラス。
しかし、これは「オープン」状態を示し、<select>
がタブで選択されたか、アイテムが選択されました。これを回避するには、select:hover:focus
しかし、これはやや醜く、固い解決策ではありません。
select:focus {
background-color: blue;
color: white;
}
<select>
<option>Click me</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>