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
sumpsi - posui - obstruxi