Choice & Value Pair

Nehmen wir an, Sie müssen dem Benutzer in einem Formular die Auswahl einer einzelnen, eindeutigen Option ermöglichen. Das ist das Reich entweder eines Dropdown-Menüs oder einer Gruppe von Radio-Buttons. Nun nehmen wir an, dass es nach jeder einzelnen Wahl eine direkte Folgefrage gibt. Zum Beispiel ein Bestellformular für eine wissenschaftliche Flüssigkeit. Sie kommt in Unzen, Tassen oder Pints, und sobald diese ausgewählt sind, muss die Anzahl der zu bestellenden Unzen, Tassen oder Pints angegeben werden. Das ist ein interessantes Designmuster, das auf verschiedene Weisen umgesetzt werden könnte.

Für tiefe Browserkompatibilität würden Sie wahrscheinlich etwas JavaScript verwenden, um bestimmte Formularelemente ein- und auszublenden. Aber zum Spaß machen wir es nur mit CSS.

Radio-Button und Zahlen-Input beide innerhalb des Labels

Für jede eindeutige Wahl haben wir ein Label, das sowohl den Radio-Button, den Text für das Label selbst als auch den Zahlen-Input für die Menge umschließt.

<label for="oz">
  <input type="radio" name="choice" value="oz" id="oz" data-label="Ozs"> 
  
  Ounces
  
  <input type="number" name="oz-val">
</label>

Zahlen-Input standardmäßig ausblenden

Da der Radio-Button und der Zahlen-Input nun benachbarte Geschwisterelemente sind, können wir den Adjacent-Sibling-Selector verwenden, um diese Eingaben gezielt anzusprechen und sie standardmäßig auszublenden.

input[type='radio'] + input[type='number'] { 
    display: none;
}

Input anzeigen, wenn Radio-Button ausgewählt ist

Wir können den Zahlen-Input anzeigen, wenn der Radio-Button ausgewählt ist, indem wir fast denselben Selektor verwenden und nur den Pseudo-Class-Selector :checked zum Radio-Button hinzufügen. Dann positionieren wir ihn nach rechts.

input[type='radio']:checked + input[type='number'] { 
    display: inline; /* unhide */
    float: right;
    margin-right: 20px; /* space for "label" */
    width: 100px;
}

Die Zahlen-Inputs „labeln“

Um genauer zu spezifizieren, was wir mit diesen Zahlen-Inputs meinen, können wir Text neben dem Input platzieren. Beachten Sie das „data-label“-Attribut bei den Radio-Buttons. Wir greifen darauf zu und fügen Text als Pseudo-Element hinzu.

input[type='radio']:after {
    position: absolute;
    right: 9px;
    top: 9px;
}
input[data-label]:checked:after {
	content: attr(data-label);
}

Hervorheben der gesamten ausgewählten Wahl/des gesamten Wertes

Um klar und deutlich anzuzeigen, welche Option wir ausgewählt haben und dass diese Auswahl mit dem Mengenwert zusammenhängt, wenden wir eine hervorgehobene Zeile an, die beide Bereiche abdeckt.

input[type='radio']:checked:before { 
    background: #ebdcad; 
    content: ""; 
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 8px;
    z-index: -1;
}

Barrierefreiheit? Browserkompatibilität?

Ein Bestellformular ist eines dieser wichtigen Dinge, bei denen Sie so viel Barrierefreiheit und so tiefe Browserkompatibilität wie möglich wünschen würden. Dies war nur eine unterhaltsame CSS-Übung, die eines Tages großartig funktionieren könnte, aber wahrscheinlich ihrer Zeit voraus ist.

In Bezug auf die Barrierefreiheit könnte es in Ordnung sein. `display: none` bei den ungenutzten Inputs ist in Ordnung, da wir sie buchstäblich ausblenden wollen, bis eine Auswahl getroffen wird, aber ich bin mir nicht sicher, wie offensichtlich das Einblenden davon ist. Wenn jemand im Namen der Barrierefreiheits-Experten in den Kommentaren sprechen möchte, würde ich es gerne hören.

Browserkompatibilität ist etwas kniffliger. Um es überhaupt zum Laufen zu bringen, muss der Browser den Adjacent-Sibling-Selector unterstützen, über den wir sprechen, nur IE 8+. Wenn dieser Selektor fehlschlägt, werden alle Zahlen-Inputs angezeigt, was kein Showstopper wäre. Sie müssten die Formatierung auf einen Selektor verschieben, der nicht „+“ verwendet. Die Hervorhebung von Feldern und Pseudo-Labeling erfordern Pseudo-Elemente, daher hat dies seine eigene Kompatibilität. Last but not least ist es leicht ungewöhnlich, dass Pseudo-Elemente überhaupt auf Radio-Button-Elementen erlaubt sind. Inputs sind Elemente ohne Inhalt (sie schließen sich selbst, wie ein img-Element). Opera und WebKit unterstützen dies zwar, aber es ist nicht klar, ob sie es sollten oder nicht. Firefox nicht, also werden Sie in diesem Browser keine Hervorhebung oder Labels sehen.

Wenn Sie eine zu 100 % narrensichere Lösung benötigen, können Sie ein Wufoo-Formular verwenden und Field Rules verwenden, um zusätzliche Felder auszublenden/anzuzeigen.

Fertig

Demo ansehen   Dateien herunterladen

Danke an Bradley Staples, der uns die Idee per E-Mail geschickt hat.