Label auf Dropdown (Select)

[pl]

Moin,

wenn ich in FF auf den Label~Text klicke, zuckt die Pfeiltaste des Selects nur kurz in sich zusammen. Die ausgewählte Option ist auch nicht weiter kenntlich. Welche Möglichkeiten gibt es denn das ein klein bischen optisch zu verbessern?

Hintergrund: Ich habe täglich in etwas längeres Select abzuarbeiten und arbeite hierzu mit Maus und Pfeiltaste. Das geht zwar zügig aber es ist halt nicht gleich zu sehen ob der Klick auf den Label~Text funktioniet hat.

Bitte mal um Hinweise, MfG

PS: Eine farbige Umrandung würde schon reichen.

[Gunnar Bittersmann]

@@pl

wenn ich in FF auf den Label~Text klicke, […] Eine farbige Umrandung würde schon reichen.

Wenn ich auf den Label-Text clicke, dann hat das Auswahlfeld den Fokus und einen blauen Rahmen:

Was hast du getan, damit das bei dir nicht so ist?

LLAP 🖖

[pl]

hi @Gunnar Bittersmann

wenn ich in FF auf den Label~Text klicke, […] Eine farbige Umrandung würde schon reichen.

Wenn ich auf den Label-Text clicke, dann hat das Auswahlfeld den Fokus und einen blauen Rahmen:

Ja, bei Dir vielleicht. Bei mir jedoch nicht und mittlerweile habe ich einen EventListener auf focus gesetzt. Möglicherweise gibt es jedoch auch eine pure CSS Lösung?

Schönen Sonntag.

PS: Chrome setzt den Rahmen. Aber mir gehts hier um FF.

[Gunnar Bittersmann]

@@pl

PS: Chrome setzt den Rahmen. Aber mir gehts hier um FF.

Mein Screenshot zeigt das Verhalten im Firefox (macOS).

Worüber reden wir bei dir (Version, Betriebssystem)?

LLAP 🖖

[Rolf B]

Hallo pl,

das ist höchst merkwürdig; ich habe gerade etwas mit jsFiddle und FF 59.0.2 für Windows gespielt. Das blaue Outline kommt ziemlich sicher, wenn ich einmal mit Tab durch die Felder gehüpft bin, es gibt aber auch Phasen - z.B. wenn ich auf den Run-Button von Fiddle geklickt habe und dann ins Input-Feld klicke, wo es einen schwarzen Rahmen bekommt und der blaue Rahmen überdeckt wird.

In Chrome kann ich das nicht nachvollziehen. FF Bug?

Als Würgherum gib ihm den hier:

input:focus, select:focus {
  box-shadow: 0px 0px 10px 5px #f83;
}

DAS sieht man.

Rolf

[pl]

hi

Als Würgherum gib ihm den hier:

input:focus, select:focus {
  box-shadow: 0px 0px 10px 5px #f83;
}

DAS sieht man.

Gute Idee 😉

Danke!