使 div 像复选框一样工作

Question

我有一个带有复选框的颜色名称列表。我希望能够选择带有标题的整个div，而不是让复选框在那里。选中的div 将用不同的背景颜色理解。

我的HTML也是和ERB文件，包含Ruby。我希望 <%= color.name %> 位于"idea[color_ids][]"iddiv 内，但是当我尝试将它们放在彼此内部时，我收到一个轨道错误

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 而不是仅在 lidiv 中获取？ 这样我就可以选择整个"想法[color_ids][]"（里面有颜色名称标题）？

Answer 1

你可以尝试这样的事情：

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

然后，您可以将标签视为div，也可以在标签中添加div包装器。

Answer 2

看起来您想自定义复选框的样式。

1. 隐藏复选框：

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

2. 将 css 样式（css 类）添加到您的"li"说"列复选框"

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

3. 向复选框标签添加样式

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

4. 选中复选框后设置标签样式

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

您还可以添加悬停在列表项上的样式

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

您可能可以在网上找到自定义 css 复选框的示例。另外，看看这个答案：如何使用CSS设置复选框的样式？