Custom Checkbox Rails / CSS

Question

I want to be able to click on the label to check my element without showing the checked so I wrote this:

input[type="checkbox"]
{
   display: none;
 }

But when I click it doesn't work. It only works if the element is already in the database.

Do I have to do javascript or can CSS do it?

#views/values/edit.html.erb*

<% @values =["Power", "Independance", "Tradition"] %>
<%= form_for @resultvalue do |f| %>
   <% @values.each do | value | %>
       <%= f.check_box :values, { multiple: true }, value, type:"checkbox" %>
       <%= f.label value %>
   <% end %>
   <%= f.submit%>  
<% end %>

input[type="checkbox"]{
        display: none;
      }
      input[type="checkbox"]+label{
        transition: all 300ms ease;
        font-size: 1.2rem;
        cursor: pointer;
        border-radius: 1rem;
        border: 3px solid white;
        background-color: #0066cc;
        padding: 0.5rem 1rem;
        display: inline-block;
        color: white;

        // Suggested by @zizzo to prevent text selection
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        // ------------------------


      }
      input[type="checkbox"]:checked+label{
        transition: all 300ms ease;
        background-color:#b70e7e;  
      }

score 0 · Answer 1 · answered May 15 '19 at 12:58

Add the for attribute to your labels with the id of the associated checkbox. That way, clicking the label will let you interact with the checkbox.

<input type="checkbox" id="checkbox1" />
<label for="checkbox1">Label name</label>

https://stackoverflow.com/a/18432439

score 0 · Answer 2 · answered May 15 '19 at 12:59

0

There's no attribute "multiple" on input tags, also you don't need to set type: 'checkbox' since you are already using the checkbox helper, and you are passing :values which I don't think makes sense.

For the label to properly change the checkbox state, you need to set the for attribute properly with the ID of the corresponding checkbox https://developer.mozilla.org/es/docs/Web/HTML/Elemento/label

You can also nest the input tag INSIDE the label so you don't need the for attribute.

Finally, collection_check_boxes would be cleaner than your code https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-collection_check_boxes

answered May 15 '19 at 12:59

arieljuod

15,460
2
25
36

I don't know how to use collection_check_boxes in my situation, with an array like this @arieljuod – Léo-Paul Dubourg May 15 '19 at 13:30
It's a little tricky/hacky but I guess something like `= f.collection_check_boxes :values, @values, :to_s, :to_s` should work. It applies both methods (`to_s`) to each element of the collection to get the value and the label, calling `to_s` just returns the same string for both. – arieljuod May 15 '19 at 14:27

score -1 · Answer 3 · answered May 15 '19 at 13:05

I am not familiar with Rails, but what I would do is either assign an id to the checkbox and use a for attribute on the label

<label for="my_input">My input</label>
<input type="checkbox" id="my_input"/>

or I would wrap the input in the label

<%= f.label value %>
  <%= f.check_box :values, { multiple: true }, value, type:"checkbox" %>
<% end %>

Custom Checkbox Rails / CSS

3 Answers3