Rails-使用图像而不是单选按钮 [英] Rails - Use image instead of radio buttons

问题描述

我有一个表单，其中有几个单选按钮.在显示屏上，我借助此问题在

我在做什么错了?

解决方案

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

我对其进行了更改(以及常规的img css)，以将填充和红色背景添加到选定的图像中，并且看起来效果很好.(请参见下面的代码段)

要么，要么您的rails代码未生成预期的HTML

 /*隐藏无线电*/[type = radio] {位置:绝对；不透明度:0；宽度:0;高度:0；}/*图像样式*/[type = radio] + img {光标:指针；内边距:5px；}/*格纹*/[type = radio]:已选中+ img {背景颜色:红色；背景图像:线性渐变(0deg，rgba(255,0,149，.25)，rgba(255,0,149,0));}  

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

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?

解决方案

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>

这篇关于Rails-使用图像而不是单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！