Rails - 使用图像而不是单选按钮

Question

我有一个表单，其中有几个单选按钮。在显示中，我在这个问题here的帮助下用图像替换了单选按钮

我的代码现在如下：

<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>

而css是：

/* 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));
}

这在那个 a 中运行良好。我得到的是图像而不是按钮，b.悬停在图像上我得到一个光标和 c。主要检查图像 A。

我的问题是单击图像 B 没有任何改变。如果我尝试通过检查来更改 B 的输入以使其被检查，它就可以工作。通过点击虽然它不起作用。

编辑： 检查，我发现一个问题是输入的尺寸很小，而图像的尺寸很大。通过单击我的 标签的左上角，这是我检查它的输入。但它是一个非常小的区域。单击其他任何地方都不会检查该按钮。

我在这里做错了什么？

Answer 1

我认为问题出在 [type=radio]:checked + img 的 CSS 中

我更改了它（以及一般的 img css），为所选图像添加填充和红色背景，它似乎工作得很好。 （见下sn-p）

无论是那个还是你的 rails 代码都不会生成预期的 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>