0

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

我的 html 也是 erb 文件并包含 ruby​​。我希望 <%= color.name %> 位于“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 中获取 color.names 而不是在 li div 中获取?这样我就可以选择整个“idea[color_ids][]”(里面有颜色名称标题)?

4

2 回答 2

1

你可以尝试这样的事情:

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

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

于 2013-10-07T19:59:26.343 回答
0

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

  1. 隐藏复选框:

    .multi-column-checkbox input[type="checkbox"] {
        visibility: hidden;
    }
    
  2. 将 css 样式(css 类)添加到您的 'li' 说 '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?

于 2013-10-07T20:31:10.297 回答