[RUBY] So dekorieren Sie CSS auf Rails6 form_with (Hilfs-) Optionsfeldern

Zweck: Implementieren Sie ein Optionsfeld mit form_with in Rails6 und dekorieren Sie es mit CSS.

Kämpfen: Die Verwendung des Helfers verdeckte die interne Struktur des Optionsfelds.

(1) Im Gegensatz zu anderen Optionen kann das Optionsfeld CSS nicht widerspiegeln, selbst wenn die Klasse ausgewählt ist. (2) Es gibt einen Fehler, bei dem die Auswahlarbeit nicht berücksichtigt werden kann, da die Bezeichnung für nicht festgelegt ist.

Der Inhalt wird unten beschrieben.

(1) CSS wird in der Klassenauswahl für das Optionsfeld nicht angezeigt.

HTML 

CSS .second{ font-size: 14px; font-weight: bold; Anzeige: Block; / * Block Level Elementization * / float: left; / * Element linksbündig / umlaufend angeben * / . . }

CSS spiegelt sich in einer solchen Beschreibung überhaupt nicht wider. Betrachten Sie das Überprüfungstool.

Ich denke, es ist auf den ersten Blick in Ordnung. Übrigens können Sie im Überprüfungstool sehen, dass die Hilfsbeschreibung in HTML konvertiert wird. Wenn Sie sie also im Tool ändern und sie ordnungsgemäß funktioniert, können Sie den geänderten Code vollständig kopieren und in den HTML-Typ ändern. Es ist eine Hand (die Datenübertragung selbst kann im HTML-Format erfolgen).

Wenn Sie CSS für ein Optionsfeld festlegen möchten, müssen Sie es abschließend in das label-Attribut anstelle der Klasse schreiben. Zu diesem Zeitpunkt muss auch die Anzeige des Standard-Optionsfelds mit dem Attribut type = "radio" ausgeblendet werden.

damit,

CSS .fields-label label{ font-size: 14px; font-weight: bold; Anzeige: Block; / * Block Level Elementization * / float: left; / * Element linksbündig / umlaufend angeben * / . . }

Alter,

input[type=radio] { Anzeige: keine; / * Optionsfelder ausblenden * / }

Fügen Sie die Beschreibung von hinzu. Dies ist ein scheinbar dekoriertes Optionsfeld.

Als ich jedoch die Eingabearbeit tatsächlich ausprobierte, trat ein Problem auf. Ich hätte die Spezifikation, die die Farbe ändert, wenn auf die Schaltfläche geklickt wird, wie folgt beschreiben sollen, aber sie funktioniert überhaupt nicht.

input[type="radio"]:checked + label{ Hintergrund: blau; / * Geben Sie die Hintergrundfarbe an, wenn Sie die Maus auswählen * / color: #ffffff; / * Geben Sie die Schriftfarbe an, wenn Sie die Maus auswählen * / }

Dies ist eine Beschreibung, die die angegebene Bewegung ausführt, wenn auf das Attribut type = "radio" (einschließlich des Beschriftungselements) geklickt wird. Überprüfen Sie dies erneut mit dem Überprüfungstool.

Auf den ersten Blick scheint es kein Problem zu geben. Werte mit unterschiedlicher ID und unterschiedlichem Wert werden in den Optionen ordnungsgemäß registriert.

(2) Fehler beim Lesen des Beschriftungselements, da keine Beschriftung für das Attribut angegeben wurde

Ich hatte große Probleme, die Ursache dafür zu identifizieren, aber nachdem ich überprüft hatte, wie das Etikett ohne den Helfer eingestellt werden kann, fand ich es heraus.

Da die Bezeichnung für nicht für die ID festgelegt wurde, wurde jede Option in VIEW nicht gut wiedergegeben. Ich weiß nicht, was es bedeutet, aber vorerst werden die CSS-Einstellungen des Optionsfelds nur angezeigt, wenn die ID und die Bezeichnung übereinstimmen. Setzen Sie also label auf den gleichen Wert wie id. //

Dies ist das ausgefüllte Formular. label for = "id" Auswahl / label Da dies die Art zu schreiben ist, habe ich die Reihenfolge geändert.

Es hat so funktioniert. Übrigens, wenn Sie mit dem Überprüfungstool überprüfen,

Auf diese Weise wird die Bezeichnung für definiert und mit der ID verknüpft.

• Übrigens haben an der Stelle, an der das Optionsfeld von collection_select an einer anderen Stelle erstellt wurde, alle Bezeichnungen für die Auswahl den gleichen Wert, und es tritt der Fehler auf, dass die erste Auswahl ausgewählt wird, unabhängig davon, welche ausgewählt ist. Bitte beachten Sie, dass die Beschriftung für die Einstellung erforderlich ist, wenn Sie ein Optionsfeld mit dem Schienenform-Helfer erstellen.