让 div 像复选框一样工作

Question

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

我的 html 也是 erb 文件并且包含 ruby​​。我希望 位于“idea[color_ids][]” id div 中。但是当我尝试把它们放在一起时，我得到一个 rails 错误

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 中而不是在 li div 中获取 color.names？这样我就可以选择整个“idea[color_ids][]”（里面有颜色名称标题）？

Answer 1

您似乎想要自定义复选框的样式。

1. 隐藏复选框：

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

2. 将 css 样式（css 类）添加到您的 'li' say 'column-checkbox'

    .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 复选框的示例。另外，看看这个答案：How to style checkbox using CSS?

Answer 2

你可以试试这样的：

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

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