Wir haben uns vor nicht allzu langer Zeit hier auf CSS-Tricks mit dem Thema Überschreiben von Standard-Button-Styles beschäftigt. Mit den üblichen, voll browserübergreifend unterstützten Styles benötigst du etwa 6-10 CSS-Regeln, um alles zu entfernen, was du von einem Button brauchst, und dann deine eigenen Styles zu implementieren. Kaum eine große Sache, wenn du mich fragst, besonders da es extrem wahrscheinlich ist, dass du Buttons sowieso stylen wirst.
Scott O’Hara hat sich das ebenfalls angesehen und ein paar interessante weitere CSS-Explorationen durchgeführt, von denen aber aus verschiedenen Gründen keine überzeugte.
display: contents;– einige semantikbasierte Barrierefreiheitsprobleme.all: unset;– setzt den Anzeigewert nicht zurück, nicht ausreichend browserübergreifend unterstützt.
Ich brauchte eine Weile, um das zu verstehen, einschließlich eines kleinen Chats mit Scott per DM. Ich war so verwirrt, dass der richtige Weg, das zu tun, was er darlegte, darin bestand, <span role="button" tabindex="0" onClick="..."> zu verwenden. *Was?!* dachte ich. Es ist fast nie richtig, einem Nicht-Button-Element zu zwingen, sich wie ein Button zu verhalten, und alle Button-Funktionalitäten auf andere Weise zu replizieren. Und tatsächlich, wenn du nur einen Button mit einem oder zwei Wörtern hast, brauchst du das wahrscheinlich nicht und kannst die Button-Styles einfach rückgängig machen. Das Problem liegt hier: Du kannst inline-block bei einem <button> nicht rückgängig machen. Anscheinend ist es einfach unmöglich. Du kannst es auf display: inline; setzen und es wird akzeptiert, aber es verhält sich nicht wie erwartet.