Spezielles HTML Inputfeld entwerfen
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Was aber geht: `:focus-within` [[Selectors Level 4 ED](https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo)] – in [unterstützenden Browsern](http://caniuse.com/#feat=css-focus-within) als *progressive enhancement*{:@en}.
>
> Codepen: [Away team](https://codepen.io/gunnarbittersmann/pen/VMbNpp)
Und so geht’s:
~~~CSS
.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)`{:.language-css}) und weder sie noch eine Checkbox den Fokus hat (`:not(:focus-within)`{:.language-css}), dann werden alle Checkboxen (`input`{:.language-css}) und alle Beschriftungen nicht-angehakter Checkboxen (`:not(:checked) + span`{:.language-css}) 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`{:.language-css} nicht unterstützt, dann auch.
Der Rest der Regeln ist Schmuck am Kleid.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)
Spezielles HTML Inputfeld entwerfen
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Was aber geht: `:focus-within` [[Selectors Level 4 ED](https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo)] – in [unterstützenden Browsern](http://caniuse.com/#feat=css-focus-within) als *progressive enhancement*{:@en}.
>
> Codepen: [Away team](https://codepen.io/gunnarbittersmann/pen/VMbNpp)
Und so geht’s:
~~~CSS
.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)`{:.language-css}) und weder sie noch eine Checkbox den Fokus hat (`:not(:focus-within)`{:.language-css}), dann werden alle Checkboxen (`input`{:.language-css}) und alle Beschriftungen nicht-angehakter Checkboxen (`:not(:checked) + span`{:.language-css}) ausgeblendet. Sichtbar bleiben also die Beschriftungen aller angehakter Checkboxen.
Der Rest der Regeln ist Schmuck am Kleid.
LLAP 🖖
--
“When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)