我想在选择单选按钮和复选框时显示 1 px 的边框。
我正在使用此代码来处理单选按钮类。
label.option_radio_label > input{ /* HIDE RADIO */
display:none;
}
label.option_radio_label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:1px solid transparent;
height: 100px;
}
label.option_radio_label > input:checked + img{
/* (RADIO CHECKED) IMAGE STYLES */
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
label.option_radio_label > input.c_disabled:checked + img{
/* (RADIO CHECKED) IMAGE STYLES */
border: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
这是我的_radio_option.html.erb代码
<div class="col-md-2">
<div class="row">
<div class="col-md-12 part_option_wrapper">
<center>
<% if pre_disabled %>
<div class='option_overlay'></div>
<% end %>
<label for="order_part_<%= radio_option.part.id %>_option_<%= radio_option.id %>"
class="option_radio_label">
<%= radio_button_tag "order[part][#{radio_option.part.id}][option]",
radio_option.id,
radio_option.is_default?,
class: "radio_option #{pre_disabled ? 'c_disabled' : ''}",
"data-option-part" => radio_option.part.id,
"data-option-name" => radio_option.name,
"data-option-disables" => "#{radio_option.disables.map(&:disable_element_id)}",
"data-option-subid" => "option_subid_#{radio_option.id}",
"data-option-group" => "part_#{radio_option.part_id}",
"data-option-enables" => "#{radio_option.enables.map(&:enable_element_id)}",
disabled: (pre_disabled ? true : false) %>
<%= image_tag radio_option.photo(:small), class: "radio_option_img",
"data-option-part" => radio_option.part.id,
"data- option-name" => radio_option.name %>
<br><%= radio_option.name %>
</label>
</center>
</div>
</div>
</div>
这是我的_part_child.html.erb
<div class="col-md-12 part-child-wrapper">
<div class="row">
<div class="col-md-2">
<label><%= part_child.name %></label>
</div>
<div class="col-md-10 selected_part_child">
<% if part_child.display_type == "dropdown" %>
<%= select_tag "order[part][#{part_child.parent.id}][children][][part][#{part_child.id}][option][][id]",
options_for_part_child(part_child),
class: "form-control child_option",
"data-option-subid" => part_child.id,
"data-option-name" => part_child.name %>
<% elsif part_child.display_type == "radio" %>
<div class="row">
<%= options_radio_tag part_child %>
</div>
<% elsif part_child.display_type == "checkbox" %>
<div class="row">
<%= options_checkbox_tag part_child %>
</div>
<% elsif part_child.display_type == "textbox" %>
<div class="row">
<%= options_textfield_tag part_child %>
</div>
<% end %>
</div>
</div>
</div>
PS:检查 radio child 部分的元素
<div class="col-sm-2">
<label for="order_part_11_children__part_14_option__id">
<input id="order_part_14_option_48" ,="" class="radio_option_child"
data-option-name="Edge" data-option-id="14"
name="order[part][11][children][][part][14][option][][id]"
type="radio" value="48" checked=""
data-option- subid="option_subid_48">
<img src="/system/options/photos/000/000/048/original/cuff_doublebutton.jpg? 1424078897"> Edge
</label>
</div>
但是当我尝试对 child 的单选选项和复选框执行相同操作时,我无法正常工作。
请帮忙。
最佳答案
在您的单选按钮模板中,您已经正确地将类 class="option_radio_label"
添加到您的标签中……但它显然没有出现在 html 中。问题不在于您的 css.. 但实际上该类并未出现在最终的 html 中。
这可能是由于拼写错误或其他一些干扰 - 但这是您需要集中精力的地方。
关于html - 在复选框和单选按钮图像周围显示 1 px 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28757725/