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

我认为问题出在你的 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>