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 ![Screenshot 2020-11-14 19.30.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/864534/4a6c068a-bed0-ea5c-5b1f- f3b5a44636fd.png)

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,

スクリーンショット 2020-11-14 18.28.39.png

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.

スクリーンショット 2020-11-14 18.35.42.png

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.

スクリーンショット 2020-11-14 18.43.06.png

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. // スクリーンショット 2020-11-14 19.35.12.png

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

スクリーンショット 2020-11-14 19.05.09.png

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

スクリーンショット 2020-11-14 19.07.24.png

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

Recommended Posts

How to decorate the radio button of rails6 form_with (helper) with CSS
[Rails] Button to return to the top of the page
[Rails] How to apply the CSS used in the main app with Administrate
How to make the schema of the URL generated by Rails URL helper https
[Rails] How to operate the helper method used in the main application with Administrate
[Rails] How to change the column name of the table
[Rails] How to get the contents of strong parameters
[Rough explanation] How to separate the operation of the production environment and the development environment with Rails
[With back tricks] How to introduce React to the simplest Rails
How to move another class with a button action of another class.
Let's summarize how to extend the expiration date of Rails
[Rails] How to display the list of posts by category
How to use the form_with method
How to get along with Rails
The story of the first Rails app refactored with a self-made helper
[Rails] How to get the URL of the transition source and redirect
[Rails] How to introduce kaminari with Slim and change the design
[Rails / Heroku / MySQL] How to reset the DB of Rails application on Heroku
[Rails] How to omit the display of the character string of the link_to method
[Rails] How to change the page title of the browser for each page
[Rails] How to use rails console with docker
[Rails] How to use the map method
How to determine the number of parallels
How to sort the List of SelectItem
The process of introducing Vuetify to Rails
[Rails] How to use helper method, confimartion
How to build Rails 6 environment with Docker
How to access Socket directly with the TCP function of Spring Integration
How to convert an array of Strings to an array of objects with the Stream API
[Rails] How to get the user information currently logged in with devise
How to compare only the time with Rails (from what time to what time, something like)
How to solve the local environment construction of Ruby on Rails (MAC)!
How to display the text entered in text_area in Rails with line breaks
[Rails] The cause of not being able to post was in form_with
[Ruby On Rails] How to search the contents of params using include?
[Rails] Articles for beginners to organize and understand the flow of form_with
[swift5] How to change the color of TabBar or the color of item of TabBar with code
[Rails] How to solve the time lag of created_at after save method
[Rails] How to decide the destination by "rails routes"
[swift] How to control the behavior when the back button of NavigationBar is pressed
How to find the cause of the Ruby error
[Ruby on Rails] How to make the link destination part of the specified id
[Rails] How to read the XML file uploaded from the screen with Hash type
[Rails] Introduction of pry-rails ~ How to debug binding.pry
Customize how to divide the contents of Recyclerview
How to get the ID of a user authenticated with Firebase in Swift
[Rails6] How to connect the posting function generated by Scaffold with the user function generated by devise
[Rails] How to register multiple records in the intermediate table with many-to-many association
[Ruby on Rails] Rails tutorial Chapter 14 Summary of how to implement the status feed
[Swift] How to link the app with Firebase
How to get today's day of the week
Output of how to use the slice method
[Rails] How to create a Twitter share button
How to use JQuery in js.erb of Rails6
[Rails] How to easily implement numbers with pull-down
How to build API with GraphQL and Rails
How to display the result of form input
How to make a unique combination of data in the rails intermediate table
[Ruby on Rails] How to Japaneseize the error message of Form object (ActiveModel)
[Rails] How to build an environment with Docker
[Java] How to get the authority of the folder