Сделать div работать как флажок

Question

Сделать div работать как флажок

0

У меня есть список имен цветов с флажками. Вместо того, чтобы иметь флажки, я хотел бы иметь возможность выбрать весь div с заголовком в нем. Проверенный div будет пониматься с другим цветом фона.

мой html также является файлом erb и содержит ruby. Я хочу, чтобы <% = color.name%> находился внутри "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>

как я могу получить color.names внутри "idea [color_ids] []" div, а не только внутри div? так что я могу выбрать всю "идею [color_ids] []" (с названием названия цвета внутри)?

anmaree 07 окт. 2013, в 22:44

Источник

Теги:

jquery

html

ruby-on-rails

ruby

css

2 ответа

Ещё вопросы

Sheik Fresh · Answer 1 · 2013-10-07T17-42-00.000Z

Вы можете попробовать что-то вроде этого:

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

Затем вы можете либо обработать ярлык, как div, либо добавить div-wrapper внутри метки.

дело в том, что у меня есть ruby-модули, которые создают эти теги в моем исходном файле, и я не знаю, как поместить color.name в div idea_color_ids_ с помощью ruby

Andrey Gorelov · Answer 2 · 2013-10-07T19-07-00.000Z

Похоже, вы хотите настроить свой флажок.

Скрыть поле:

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

Добавьте стили css (класс css) в ваш 'li' say 'column-checkbox'

 .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. Кроме того, взгляните на этот ответ: Как настроить флажок с помощью CSS?