web-dev-qa-db-ja.com

CSSで開いている選択ボックスを選択する方法はありますか？

Webkit-appearance属性をnoneに設定した後、背景画像（矢印）を選択ボックスに設定しました。オプションリストを開いたら、別の背景画像を表示したい（上向き矢印）。それに疑似クラスまたは何かがありますか？調査中に何も見つかりませんでした...

htmlcssselectselectorhtml-select
15
user2718671

HTMLのselect要素がCSSまたはJavaScriptを使用して開かれているかどうかを検出することはできません。

カスタムドロップダウンの矢印記号をカスタマイズする場合、最適なオプションは、非表示のselect要素にマップするカスタムドロップダウンコンポーネントを使用することです。

9
Curt

: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>
19
Nico O