[RUBY] Comment décorer CSS sur les boutons radio de rails6 form_with (helper)

Objectif: implémenter un bouton radio avec form_with dans rails6 et le décorer avec CSS.

Lutte: l'utilisation de l'assistant a masqué la structure interne du bouton radio.

(1) Contrairement aux autres options, le bouton radio ne peut pas refléter le CSS même si la classe est sélectionnée. (2) Il y a un bogue que le travail de sélection ne peut pas être reflété car l'étiquette pour n'est pas définie.

Le contenu est décrit ci-dessous.

(1) CSS n'est pas reflété dans le sélecteur de classe pour le bouton radio.

HTML 

CSS .second{ font-size: 14px; font-weight: bold; display: block; / * Elémentisation au niveau du bloc * / float: left; / * Spécifiez la justification / le bouclage de l'élément à gauche * / . . }

CSS n'est pas du tout reflété dans une telle description. En regardant l'outil de vérification,

Je pense que c'est OK à première vue. En passant, ce que vous pouvez voir dans l'outil de vérification, c'est que la description de l'aide est convertie en HTML, donc si vous la modifiez sur l'outil et qu'elle fonctionne correctement, vous pouvez copier le code modifié dans son intégralité et le changer en type HTML. C'est une main (la transmission des données elle-même peut être au format HTML).

Pour conclure, si vous souhaitez définir CSS pour un bouton radio, vous devez l'écrire dans l'attribut label au lieu de la classe. À ce moment-là, il est également nécessaire de masquer l'affichage du bouton radio standard défini avec l'attribut type = "radio".

donc,

CSS .fields-label label{ font-size: 14px; font-weight: bold; display: block; / * Elémentisation au niveau du bloc * / float: left; / * Spécifiez la justification / le bouclage de l'élément à gauche * / . . }

âge,

input[type=radio] { affichage: aucun; / * Masquer les boutons radio * / }

Ajoutez la description de. Il s'agit d'un bouton radio apparemment décoré.

Cependant, lorsque j'ai réellement essayé le travail d'entrée, un problème est survenu. J'aurais dû décrire la spécification qui change de couleur lorsque le bouton est cliqué comme suit, mais cela ne fonctionne pas du tout.

input[type="radio"]:checked + label{ background: blue; / * Spécifiez la couleur d'arrière-plan lorsque la souris est sélectionnée * / color: #ffffff; / * Spécifiez la couleur de la police lorsque la souris est sélectionnée * / }

Il s'agit d'une description qui effectue le mouvement spécifié lorsque l'attribut type = "radio" (y compris l'élément label) est cliqué. Vérifiez à nouveau avec l'outil de vérification.

À première vue, il semble qu'il n'y ait pas de problème. Les valeurs avec un identifiant et une valeur différents sont correctement enregistrées dans les options.

(2) Erreur lors de la lecture de l'élément d'étiquette en raison de l'absence de spécification d'étiquette pour l'attribut

J'ai eu beaucoup de mal à identifier la cause de cela, mais après avoir vérifié comment définir l'étiquette lorsque vous n'utilisez pas l'assistant, j'ai découvert.

Comme l'étiquette de n'était pas définie pour id, chaque option n'était pas bien reflétée dans VIEW. Je ne sais pas ce que cela signifie, mais pour le moment, les paramètres CSS du bouton radio ne seront reflétés que lorsque l'identifiant et le libellé correspondent. Alors, définissez l'étiquette pour la même valeur que id. //

Ceci est le formulaire rempli. étiquette pour = "id" Choix / étiquette Puisque c'est la manière d'écrire, j'ai changé l'ordre.

Cela a fonctionné comme ça. En passant, si vous vérifiez avec l'outil de vérification,

De cette manière, l'étiquette pour est définie et est liée à id.

• À propos, à l'endroit où le bouton radio a été créé par collection_select à un autre endroit, toutes les étiquettes des choix ont la même valeur, et une erreur se produit: le premier choix est sélectionné, peu importe celui qui est sélectionné. Veuillez noter que l'étiquette de réglage sera requise lors de la création d'un bouton radio avec l'assistant de forme des rails.