Überschreiben Des Standard-Button-Stile

0
18

Es gibt eine Vielzahl von “Button” in HTML. Du hast:

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

Plus, für besser oder schlimmer noch, Menschen wie mit links, die sind gestaltet, um das gleiche Aussehen der anderen echten buttons auf der Website

<a href=”#0″ class=”button”>Button</a>

Eine Herausforderung ist, sich alle diese Elemente zu suchen und layout exakt die gleichen. Wir werden decken, ein paar Möglichkeiten.

Eine weitere Herausforderung ist, Menschen Sie korrekt verwenden

Das ist ein bisschen überraschend für mich — aber ich höre es oft genug darum kümmern — ist, dass mehr und mehr Entwickler sind mit <div>s für die Tasten. Wie in, Sie nur erreichen, für was auch immer generisch, styling-freie HTML ist praktisch, und es aufbauen, wie benötigt werden. Andy Bell erklärt, warum eine echte Taste ist besser:

So, <button> – Elemente sind ein Schmerz in den Hintern, um Stil richtig? Das bedeutet nicht, sollten Sie fügen Sie Ihren JavaScript-Ereignisse eine <div> oder ein <a href=”#”> obwohl. Sehen Sie, wenn Sie einen <button>, erhalten Sie die Tastatur-events kostenlos. Sie hilft auch bei der screen-reader-Benutzer, denn es werde verkünden, das element richtig.

Und hier ist Andy wieder helfen Sie mit, ein Stück CSS, erhalten Sie einen sauber gestalteten button:

Finden Sie die Stift-Taste Pal — einige grundlegende button-Stile von Andy Bell (@hankchizljaw) auf CodePen.

Es ist ein styling, das könnte nur der geistige Straßensperre

Es ist ein bisschen verständlich. Tasten sind seltsam! Sie haben eine gute Menge von default-styling (die kommen aus dem “User-Agent-Stylesheet”) , variiert von browser zu browser und die Mittel haben Sie zu tun, um Sie genau, wie Sie wollen.

Siehe all die Verrücktheit gibt es?

  • Ohne styling, der button ist ein bisschen wenig und hat, dass native Grenze/border-radius und box-shadow, was Los ist.
  • Nur durch die Einstellung der font-size, verlieren wir alle die Standardeinstellungen, aber es hat eine neue Standard-Aussehen, mit einem Rahmen und Ecken, einen Farbverlauf im hintergrund, und kein box-shadow. Dies ist im wesentlichen -webkit-appearance: button;.
  • Tasten haben Ihre eigene schriftart-Familie, also nicht Erben von der Kaskade, es sei denn, Sie sagen es.

Hier ist Chrome user-agent-stylesheet für die Schaltflächen:

Firefox verhält sich ein wenig anders. Sehen Sie oben im video, wie das einstellen border: 0; entfernt die Grenze in Chrom, sondern auch den hintergrund? Nicht der Fall in Firefox:

Ich habe nur darauf hingewiesen, zu sagen, ich bekomme es, Tasten sind wirklich seltsame Dinge im Browser. Faktor in ein Dutzend andere Browser -, mobile -, und die Idee, dass wir wollen, um Stil, alle diese verschiedenen Elemente genau gleich Aussehen (siehe die öffnung des Artikels), und ich habe ein gewisses Maß an Empathie für die Menschen wollen, dies zu vermeiden.

Schadet nie, zu konsultieren Normalisieren

Normalisieren macht einen guten Betrag:

/**
* 1. Ändern Sie die schriftart in allen Browsern.
* 2. Entfernen Sie die Marge in Firefox und Safari.
*/

– Taste,
Eingang,
optgroup,
wählen Sie,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}

/**
* Zeigen Sie den überlauf im IE.
* 1. Zeigen Sie das überlauf in Rand.
*/

– Taste,
input { /* 1 */
overflow: visible;
}

/**
* Entfernen Sie die Vererbung von text-transform, die bei Edge, Firefox und IE.
* 1. Entfernen Sie die Vererbung von text-transform in Firefox.
*/

– Taste,
wählen Sie” { /* 1 */
text-transform: none;
}

/**
* Korrigieren Sie die Unfähigkeit zum Stil anklickbar Arten in iOS und Safari.
*/

– Taste,
[type=”button”],
[type=”reset”],
[type=”submit”] {
-webkit-appearance: button;
}

Ich war ein bisschen überrascht zu sehen, WTF, Formen? nicht abgedeckt Schaltflächen, die nur, weil, wie viel Verrücktheit, die es gibt. Aber der Formular-Elemente, Projekt Peitschen in Form noch mehr sind notorisch schwierig!

Ein Stil-Test-Ding Irgendwie

Ich fühle mich wie die Antwort auf diese ist im Grunde eine große ol’ block der CSS. Das ist es, was Andy zur Verfügung gestellt, und Sie konnte sehr wahrscheinlich kommen, um ein auf Ihre eigenen, indem Sie einfach nur ein wenig schwerer übergeben, als der übliche Stil einrichten-Regeln mit Ihren Tasten.

Immer noch fühlte ich mich gezwungen, um ein wenig tester-Maschine-Ding so wechseln Sie die styles auf und ab und sehen, wie Sie alle zusammen gehen in was auch immer browser Sie geschehen zu sein in:

Finden Sie die Stift-Taste Konsistente Stile von Chris Coyier (@chriscoyier) auf CodePen.

A11y

Der größte Punkt hier ist die Verwendung des richtigen systemeigenen Elemente, wie Sie bekommen eine Menge von Funktionalität und Zugänglichkeit für freier. Aber Sie könnte genauso gut bekommen, das styling stimmt ebenfalls!

Während wir uns unterhielten Tasten, ich bin gonna verwenden Sie das gleiche Angebot habe ich genutzt, in unserem, Wenn, Verwenden Sie Das Button-Element Beitrag von MDN:

Warnung: Seien Sie vorsichtig, wenn die Markierung oben links mit der Schaltfläche Rolle. Tasten sind zu erwarten, ausgelöst zu werden, mit der Space-Taste, während links sind erwarteten zu werden, ausgelöst durch die Enter-Taste. In anderen Worten, wenn links verwendet werden, Verhalten sich wie Tasten,, hinzufügen role=”button” alleine reicht nicht aus. Es wird auch notwendig sein, fügen Sie ein Schlüssel-Ereignis-handler, der hört für Sie die Space-Taste, um im Einklang mit einheitlichen Schaltflächen.

Sie brauchen keine role=”button” <button>, da sind Sie schon Tasten, aber wenn Sie ‘ re gehen, um andere Elemente wie-Taste, haben Sie mehr Arbeit zu tun, um imitieren die Funktionalität.

Plus, nicht vergessen :hover und :focus styles! Einmal habe Sie stritt in der die Stile der Standard-Zustand, das sollte nicht so schwer sein, aber Sie definitiv brauchen Sie!

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

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

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