Beliebige Tabellenzeilen mit <details> schalten?

[Rolf B]

Hallo fietur,

Ich setze <details> hauptsächlich deshalb ein, um dem geringen Platzangebot auf Handys entgegenzukommen, also das Scrollen nicht überzustrapazieren.

Hä? Das geht auch mit einer Checkbox. Das for-Attribut des label-Elements kennst Du?

<input id="einblenden" type="checkbox"><label for="einblenden">Einblenden</label>

Jetzt reagiert die Checkbox auf ein antippen des Labels, und das kannst Du mit padding so groß machen, wie Du willst. Wenn Du willst, kannst Du mit einer @media-Abfrage das Padding bei kleinen Viewports sogar noch erhöhen.

Du kannst die Checkbox auch visuell verstecken, musst dann aber dem Label ein Outline verpassen, wenn die Checkbox den Fokus hat:

#einblenden {
   width: 0;
   margin: 0;
   padding: 0;
}
#einblenden:focus + label[for=einblenden] {
   outline: 2px solid black;
}
#einblenden:checked + label[for=einblenden] {
   background-color: green;
}

oder so ähnlich. Die Checkbox ist jetzt versteckt und das Label ist visuell das Bedienelement.

Ich hab sowas vorgestern erst noch gebaut, für die Überarbeitung vom chmod-Helferlein im Selfwiki. Da habe ich allerdings die Checkbox im Label und arbeite mit :has() - mit einer @supports-Klausel für Browser, die :has() nicht kennen (wie z.B. den Firefox 😟). Dort ist einfach die Checkbox sichtbar.

Guck Dir das CSS zum chmod-Helferlein mal in der CSS Datei an, die steht im Selfwiki in Mediawiki:Helferlein.css. Die chmod-Styles sind alle mit der Klasse .helferlein-chmod qualifiziert.

Rolf