Benutzerdefinierte Styling -Formulareingaben mit modernen CSS -Funktionen

Heutzutage ist das Erstellen benutzerdefinierter Kontrollkästchen, Optionsschaltflächen und Toggle -Switches durchaus machbar, während die Semantik und Barrierefreiheit beibehalten wird. Wir brauchen nicht einmal eine Zeile von JavaScript -Code oder zusätzlichen HTML -Elementen! Eigentlich ist es in letzter Zeit einfacher als in der Vergangenheit. mal sehen.

Der endgültige Effekt ist wie folgt:

Die Dinge sind viel einfacher als zuvor!

Der Grund ist, dass wir endlich können<input> ::before und ::after Pseudo-Elementen des Tags selbst sind gestylt. Dies bedeutet, dass wir aufbewahren und einstellen können<input> Stil ohne zusätzliche Elemente. Zuvor mussten wir uns auf extra verlassen<div> oder<code><span></span> Um benutzerdefiniertes Design zu implementieren.

Schauen wir uns den HTML -Code an

Hier gibt es nichts Besonderes. Wir müssen diesen HTML -Code nur verwenden, um die Eingabe zu stylen:

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

Hier geht es um den HTML -Teil. Natürlich wird empfohlen, name und id -Attribute sowie passende Angaben hinzuzufügen<label></label> Element:

 <label for="c1">Kontrollkästchen</label>
<input type="checkbox" id="c1">

<label for="r1">Optionsknopf</label>
<input type="radio" id="r1">

<label for="s1">schalten</label>
<input type="checkbox" id="s1" class="switch">

Starten Sie Styles

Zunächst überprüfen wir die Unterstützung für appearance: none; einschließlich seiner Präfixversion. appearance ist der Schlüssel, da es so konzipiert ist, dass es den Standardstil des Browsers aus dem Element entfernen. Wenn der Browser diese Eigenschaft nicht unterstützt, gilt der Stil nicht und der Standardeingangsstil wird angezeigt. Dies ist absolut in Ordnung und auch ein gutes Beispiel für eine allmähliche Verbesserung.

 @Supports (-webkit-upearance: keine) oder (-moz-äqulearance: Keine) {
  input [type = 'checkbox'],
  input [type = 'radio'] {
    -Webkit-Appearanz: Keine;
    -moz-apparance: Keine;
  }
}

Im Moment befindet sich appearance noch in der Arbeitsabgabephase, aber hier ist die Unterstützung:

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Zahl zeigt an, dass der Browser diese Funktion in dieser und späteren Versionen unterstützt.

Desktop

Mobile/Tablet

Wie Links müssen wir die unterschiedlichen Interaktionszustände von Formularelementen berücksichtigen. Wir betrachten diese Zustände beim Festlegen von Elementstilen:

• :checked
• :hover
• :focus
• :disabled

Hier finden Sie beispielsweise, wie Sie unsere Umschalteingabe stylen, Knöpfe erstellen und berücksichtigen können :checked Status:

 /* Container schalten*/
.schalten {
  Breite: 38px;
  Border-Radius: 11px;
}

/* Schalterknopf*//
.switch :: nach {
  links: 2px;
  Top: 2px;
  Grenzradius: 50%;
  Breite: 15px;
  Höhe: 15px;
  Hintergrund: var (-ab, var (-Grenze));
  Transformation: Translatex (var (-x, 0));
}

/* Farbe und Position ändern, wenn er ausgewählt ist*/
.switch: überprüft {
  --ab: var (-aktiviner);
  --x: 17px;
}

/* Reduzieren Sie die Deckkraft des Kippknaufs, wenn der Eingang deaktiviert ist*/
.Switch: Deaktiviert: nicht (: überprüft) :: After {{
  Deckkraft: .6;
}

wir werden<input> Elemente werden als Behälter verwendet. Der Knopf im Eingang wird mit dem ::after Pseudoelement erstellt. Auch hier ist keine zusätzliche Markierung erforderlich!

Wenn Sie den Stil in der Demo öffnen, werden Sie feststellen, dass wir einige CSS -benutzerdefinierte Eigenschaften definieren, da dies eine großartige Möglichkeit geworden ist, wiederverwendbare Werte im Stylesheet zu verwalten:

 @Supports (-webkit-upearance: keine) oder (-moz-äqulearance: Keine) {
  input [type = 'checkbox'],
  input [type = 'radio'] {
    --aktiv: #275efe;
    --Active-Inner: #fff;
    -Fokus: 2px RGBA (39, 94, 254, .25);
    --größer: #BBC1E1;
    --Größen Sie: #275efe;
    -Background: #fff;
    -Behindert: #f6f8ff;
    -Innerhalb von Inner: #e1e6f9;
  }
}

Es gibt jedoch einen weiteren Grund, warum wir benutzerdefinierte Eigenschaften verwenden - sie sind sehr geeignet, um Werte basierend auf dem Status eines Elements zu aktualisieren! Wir werden hier nicht auf Details eingehen, aber das folgende Beispiel dafür ist ein Beispiel dafür, wie benutzerdefinierte Eigenschaften auf der Grundlage verschiedener Zustände verwendet werden.

 /* Standardwert*//
input [type = 'checkbox'],
input [type = 'radio'] {
  --aktiv: #275efe;
  --größer: #BBC1E1;
  Grenze: 1px Solid var (-BC, var (-Grenze));
}

/* Schreiben Sie den Standardwert*///
input [type = 'checkbox']: überprüft,
input [type = 'radio']: überprüft {
  --B: var (-aktiv);
  -BC: var (-aktiv);
}

/* Wenn nicht ausgewählt und nicht deaktiviert ist, wird eine andere Randfarbe angewendet, wenn sie schweben*/
input [type = 'checkbox']: nicht (: checked): nicht (: deaktiviert): schwebe,
input [type = 'radio']: nicht (: checked): nicht (: deaktiviert): hover {
  -BC: var (-Grenzhalter);
}

Für die Zugänglichkeit sollten wir benutzerdefinierte Fokusstile hinzufügen. Wir haben den Standard -Umriss entfernt, weil sie nicht wie der Rest des von uns festgelegten Stils abgerundet werden kann. box-shadow mit abgerundeten Ecken kann jedoch einen abgerundeten Eckstil erzeugen, der wie ein Umriss funktioniert.

 input [type = 'checkbox'],
input [type = 'radio'] {
  -Fokus: 2px RGBA (39, 94, 254, .25);
  Umriss: Keine;
  Übergang: Box-Shadow .2s;
}

input [type = 'CheckBox']: Fokus,
input [type = 'radio']: fokus {
  Box-Shadow: 0 0 0 var (-Fokus);
}

Sie können auch ausrichten und direkt einstellen, um in HTML zu folgen<input> Elementar<label></label> Elementstil:

 <label for="c1">Kontrollkästchen</label>
<input type="checkbox" id="c1">

input [type = 'checkbox'] label,
input [type = 'radio'] label {
  Anzeige: Inline-Block;
  vertikaler Align: Top;
  /* Andere Stile*///
}

input [type = 'checkbox']: deaktiviertes Beschriftung,
input [type = 'radio']: deaktiviertes label {
  Cursor: nicht verurteilt;
}

Zeigen Sie die Demo noch einmal:

Hoffentlich können Sie sehen, wie bequem es ist, heutzutage benutzerdefinierte Formularstile zu erstellen. Aufgrund von Pseudo-Elementen müssen weniger Aufschläge direkt in Form eines Formulareingangs erforderlich sind. Aufgrund kundenspezifischer Eigenschaften sind weniger Stilschalter erforderlich. Und dank @supports hat es ziemlich gute Browser -Unterstützung.

Alles in allem ist dies viel besser als die Entwicklungserfahrung, mit der wir uns in der Vergangenheit befassen mussten!