html - 在复选框和单选按钮图像周围显示 1 px 边框

Question

我想在选择单选按钮和复选框时显示 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 的单选选项和复选框执行相同操作时，我无法正常工作。

请帮忙。

Answer 1

在您的单选按钮模板中，您已经正确地将类 class="option_radio_label" 添加到您的标签中……但它显然没有出现在 html 中。问题不在于您的 css.. 但实际上该类并未出现在最终的 html 中。

这可能是由于拼写错误或其他一些干扰 - 但这是您需要集中精力的地方。