Question

我有一个带有复选框的颜色名称列表。我没有选中复选框，而是希望能够选择包含标题的整个div。检查的div将被理解为具有不同的背景颜色。

我的html也是和erb文件并包含ruby。我想要＆lt;％= color.name％＆gt;在“idea [color_ids] []”id div里面。但当我尝试将它们放在彼此内部时，我会遇到导轨错误

html / erb文件

  <ul class="multi-column-checkbox">
        <% for color in Color.master_colors %>
            <li><%= check_box_tag "idea[color_ids][]", color.id,   
@idea.colors.include?(color) %> <%= color.name %></li>
        <% end %>
      </ul>

如何在“idea [color_ids] []”div中获取color.names，而不是仅仅在li div中？这样我就可以选择整个“idea [color_ids] []”（里面有颜色名称标题）？

Answer 1

您可以尝试这样的事情：

<label for="check1">
  <input type="checkbox" name="check" id="check1" /> Testing
</label>

然后你可以将标签视为div或在标签内添加div-wrapper。

Answer 2

您希望自定义样式复选框。

隐藏复选框：

.multi-column-checkbox input[type="checkbox"] {
    visibility: hidden;
}

将css样式（css类）添加到您的＆＃39; li＆＃39;说＆＃39;列 - 复选框＆＃39;

 .column-checkbox{
     width: .. px;
     height: .. px;
     background-color: some_color;
     borders...
     **position: relative;**
 }

将样式添加到复选框标签

.column-checkbox label {
    **position: absolute;**
    /* top, bottom, left, right */ 
    width: ...;
    height: ...;
    /* etc */
}

选中复选框后标签的样式

.column-checkbox label:after {
    /* Styles after select */
}

您还可以在列表项

.column-checkbox label:hover{
    /* Hover styles */
}

您可以在网上找到自定义css复选框的示例。另外，请看一下这个答案：How to style checkbox using CSS?

让div像复选框一样工作

2 个答案: