Rails - Use image instead of radio buttons

Question

I have a form where I have a couple of radio buttons. In the display, I replaced the radio buttons with images with the help of this question here

My code is now as follows:

<div class="form-group col-md-5">
    <%= order_item_fields.label :frame_id do %>
        <%= order_item_fields.radio_button :frame_id, "1", :checked => true%> 
        <%= image_tag("http://placehold.it/40x60/0bf/fff&text=A", size: "80")  %>
    <% end %>
    <%= order_item_fields.label :frame_id do %>
        <%= order_item_fields.radio_button :frame_id, "2"%> 
        <%= image_tag("http://placehold.it/40x60/0bf/fff&text=B", size: "80")  %>
    <% end %>
</div>

And the css is:

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  background-image: linear-gradient(0deg,rgba(255,0,149,.25),rgba(255,0,149,0));
}

This is working fine in that a. I'm getting images instead of buttons, b.hovering over the images I get a cursor and c. Image A is checked primarily.

My problem is that clicking on image B changes nothing. If I try through inspecting to change the input of B so that its checked, it works. Through clicking though its not working.

EDIT: Inspecting, I found that one problem is that size of the input is very small, while the size of the image is very big. By clicking at the upper left corner of my tag which is the input I get it checked. But its a very small area. Clicking anywhere else does not check the button.

What am I doing wrong here?

Answer 1

I'd think the problem is in your CSS for [type=radio]:checked + img

I changed it (as well as the general img css) to add padding and red background for to the selected image and it seems to work just fine. (see below snippet)

Either that or your rails code does not generate the expected HTML

/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
  padding: 5px;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  background-color: red;
  background-image: linear-gradient(0deg,rgba(255,0,149,.25),rgba(255,0,149,0));
}

<div class="form-group col-md-5">
        <label for="imageA" name="image">
            <input checked type="radio" id="imageA" name="image"/>
            <img src="http://placehold.it/40x60/0bf/fff&text=A"/>
         </label>
        <label for="imageB" name="image">
            <input type="radio" id="imageB" name="image"/>
            <img src="http://placehold.it/40x60/0bf/fff&text=B"/>
         </label>
    </div>