[RUBY] How to decorate the radio button of rails6 form_with (helper) with CSS

Purpose: Implement a radio button with form_with in rails6, and decorate it with CSS.

Struggling: Using a helper obscured the internal structure of the radio button.

(1) Unlike other options, the radio button cannot reflect CSS even if the class is selected. (2) There is a bug that the selection work cannot be reflected because label for is not set.

The contents are described below.

(1) CSS is not reflected in the class selector for radio buttons.

HTML 

CSS .second{ font-size: 14px; font-weight: bold; display: block; / * Block level elementization * / float: left; / * Specify element left justification / wraparound * / . . }

Such a description does not reflect CSS at all. Looking at the verification tool,

I think it's OK at first glance. By the way, what you can see in the verification tool is that the helper description is converted to HTML, so if you modify it on the tool and it works correctly, you can copy the modified code in its entirety and change it to HTML type. It's a hand (the data transmission itself can be in HTML format).

To conclude, if you want to set CSS for a radio button, you have to write it in the label attribute instead of the class. At that time, it is also necessary to hide the display of the standard radio button set with the type = "radio" attribute.

so,

CSS .fields-label label{ font-size: 14px; font-weight: bold; display: block; / * Block level elementization * / float: left; / * Specify element left justification / wraparound * / . . }

age,

input[type=radio] { display: none; / * Hide radio buttons * / }

Add the description of. This is what looks like a decorated radio button.

However, when I actually tried the input work, a problem occurred. The specification that changes color when the button is clicked should be described as follows, but it does not work at all.

input[type="radio"]:checked + label{ background: blue; / * Specify the background color when the mouse is selected * / color: #ffffff; / * Specify the font color when the mouse is selected * / }

This is a description that makes the specified movement when the type = "radio" attribute (including the label element) is clicked. Check again with the verification tool.

At first glance it looks like there is no problem. Values with different id and value are registered properly in the options.

(2) Error reading label element due to no specification of label for attribute

I had a lot of trouble identifying the cause of this, but after checking how to set the label without the helper, I found out.

Since label for was not set for id, each option was not reflected well in VIEW. I don't know what it means, but for the time being, the CSS settings of the radio button will be reflected only when the id and label for match. So, set label for the same value as id. //

This is the completed form. label for = "id" Choices / label Since this is the way to write, I changed the order.

It worked like this. By the way, if you check with the verification tool,

In this way, label for is defined and is linked to id.

• By the way, in the place where the radio button was created by collection_select in another place, all the label for of the choices have the same value, and an error occurs that the first choice is selected no matter which one is selected. Please note that the label for setting will be required when creating radio buttons with the rails form helper.