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

Question

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

我的代码现在如下：

<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

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

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

或者您的 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>