Standardmäßige Button-Stile überschreiben

<button>Button</button>
<input type="button" value="Button">

<a href="#0" class="button">Button</a>

`s für Buttons verwenden. Das heißt, sie greifen einfach nach dem, was gerade an generischem, stilfreiem HTML zur Hand ist, und bauen es nach Bedarf auf. Andy Bell erklärt, warum ein echter Button besser ist

Also, ``-Elemente sind lästig zu stylen, oder? Das bedeutet nicht, dass Sie Ihre JavaScript-Events an ein `

` oder einen `` anhängen sollten. Sehen Sie, wenn Sie einen `

` verwenden, erhalten Sie Tastaturereignisse kostenlos. Sie helfen auch Screenreader-Benutzern, da das Element korrekt angekündigt wird.

Und hier hilft Ihnen Andy noch einmal mit einem Stück CSS, das Ihnen einen sauber gestylten Button verschafft

Sehen Sie den Pen Button Pal — some basic button styles von Andy Bell (@hankchizljaw) auf CodePen.

Es ist dieses Styling, das vielleicht die mentale Blockade ist

Es ist ein wenig verständlich. Buttons sind seltsam! Sie haben eine gute Menge an Standard-Styling (das aus der "User Agent Stylesheet" stammt), das von Browser zu Browser variiert und bedeutet, dass Sie Arbeit leisten müssen, um sie genau so zu bekommen, wie Sie sie wollen.

Sehen Sie die ganze Seltsamkeit dort?

• Ohne jegliches Styling ist der Button irgendwie klein und hat diese native Rahmen/Randradius/Box-Schatten-Sache.
• Allein durch die Einstellung der `font-size` verlieren wir all diese Standardwerte, aber es hat einen neuen Standardlook, einen mit einem Rahmen und quadratischen Ecken, einem Verlaufshintergrund und keiner Box-Schatten. Das ist im Wesentlichen `-webkit-appearance: button;`.
• Buttons haben ihre eigene `font-family`, also erben sie nicht aus der Kaskade, es sei denn, Sie weisen sie an.

Hier ist die User-Agent-Stylesheet für Buttons von Chrome

Firefox verhält sich etwas anders. Sehen Sie im obigen Video, wie das Setzen von `border: 0;` den Rahmen in Chrome entfernt hat, aber auch den Hintergrund? Nicht der Fall in Firefox

Ich weise nur darauf hin, um zu sagen, ich verstehe es, Buttons sind wirklich seltsame Dinge in Browsern. Berücksichtigen Sie ein Dutzend andere Browser, Mobilgeräte und die Idee, dass wir all diese verschiedenen Elemente so stylen wollen, dass sie genau gleich aussehen (siehe Anfang des Artikels), und ich habe ein gewisses Maß an Empathie für Leute, die dies vermeiden wollen.

Es schadet nie, sich an Normalize zu halten

Normalize leistet gute Arbeit

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

Ich war ein wenig überrascht, dass WTF, Forms? keine Buttons behandelt, allein schon wegen der vielen Seltsamkeiten. Aber die Formelemente, die dieses Projekt in Form bringt, sind noch notorisch schwieriger!

Eine Art Stil-Test-Ding

Ich habe das Gefühl, die Antwort darauf ist im Grunde ein großer Block CSS. Das hat Andy bereitgestellt, und Sie könnten mit ziemlicher Sicherheit einen eigenen finden, indem Sie einfach etwas energischer mit Ihren Style-Regeln für Ihre Buttons umgehen als üblich.

Dennoch sah ich mich gezwungen, eine kleine Testmaschine zu bauen, damit Sie Stile ein- und ausschalten und sehen können, wie sie in jedem Browser, in dem Sie sich gerade befinden, zusammenwirken.

Sehen Sie den Pen Consistent button styles von Chris Coyier (@chriscoyier) auf CodePen.

A11y

Der wichtigste Punkt ist hier die Verwendung der korrekten nativen Elemente, da Sie dadurch eine Menge Funktionalität und Barrierefreiheit kostenlos erhalten. Aber Sie können auch das Styling richtig hinbekommen!

Während wir über Buttons sprechen, werde ich dasselbe Zitat verwenden, das ich in unserem Beitrag Wann das Button-Element verwenden von MDN verwendet habe

Warnung: Seien Sie vorsichtig, wenn Sie Links mit der Button-Rolle markieren. Buttons werden erwartet, mit der Leertaste ausgelöst zu werden, während Links erwartet werden, über die Eingabetaste ausgelöst zu werden. Mit anderen Worten, wenn Links dazu verwendet werden, sich wie Buttons zu verhalten, reicht es nicht aus, nur `role="button"` hinzuzufügen. Es wird auch notwendig sein, einen Ereignisbehandlungsmechanismus für die Tastatur hinzuzufügen, der auf die Leertaste achtet, um konsistent mit nativen Buttons zu sein.

Sie benötigen keine `role="button"` auf ``, da diese bereits Buttons sind, aber wenn Sie ein anderes Element button-ähnlich machen, haben Sie mehr Arbeit zu tun, um die Funktionalität nachzuahmen.

Und vergessen Sie nicht die `:hover`- und `:focus`-Stile! Sobald Sie die Stile für den Standardzustand im Griff haben, sollte das nicht so schwer sein, aber Sie brauchen sie definitiv!

button:hover,
button:focus {
    background: #0053ba;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}