Spezielles HTML Inputfeld entwerfen

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Was aber geht: :focus-within [Selectors Level 4 ED] – in unterstützenden Browsern als progressive enhancement.

Codepen: Away team

Und so geht’s:

.multiple-select-widget:not(:hover):not(:focus-within) input,
.multiple-select-widget:not(:hover):not(:focus-within) :not(:checked) + span
{
	display: none;
}

Wenn der Mauscursor nicht über der umschließenden Box liegt (:not(:hover)) und weder sie noch eine Checkbox den Fokus hat (:not(:focus-within)), dann werden alle Checkboxen (input) und alle Beschriftungen nicht-angehakter Checkboxen (:not(:checked) + span) ausgeblendet. Sichtbar bleiben also die Beschriftungen aller angehakter Checkboxen.

Wenn der Mauscursor über der umschließenden Box liegt oder sie oder eine Checkbox den Fokus hat, dann sind alle Checkboxen mit ihren Beschriftungen zu sehen. Wenn ein Browser :focus-within nicht unterstützt, dann auch.

Der Rest der Regeln ist Schmuck am Kleid.

LLAP 🖖

PS: Das div habe ich eingefügt, weil WebKits sich beharrlich weigern, display: flex auf fieldset anzuwenden. Meh.