Блог

Главная - Вопросы по программированию - выбрать несколько элементов, таких как встроенный список, только с помощью CSS?

выбрать несколько элементов, таких как встроенный список, только с помощью CSS?

#html #css #forms #drop-down-menu

#HTML #css #формы #выпадающее меню

Вопрос:

Можем ли мы реализовать опции множественного выбора, такие как встроенные формы (без нажатия кнопки CTRL) (см. Изображение), только в CSS? Несколько веб-фреймворков css, таких как semantic-ui, используют, но они используют Javascript.

введите описание изображения здесь

Комментарии:

1. w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple В этом используется собственный выпадающий список с несколькими вариантами выбора, но вам нужно использовать кнопку ctrl, чтобы выбрать несколько значений, поэтому это невозможно без javascript, но вы можете использовать флажки и настроить их, сделав их похожими на выпадающие значения, но в конце вам нужен javascript для отображения выбранных значений вверху

Ответ №1:

Вероятно, вы могли бы сделать что-то подобное с помощью флажков. Вот базовый список, который я составил для вас.

 ul {
  height: 100px;
  width: 150px;
  overflow: auto;
} 
 <div id="checkboxes">
  <label>Choose some boxes</label>
  <ul>
    <li><input type="checkbox"> checkbox 1</li>
    <li><input type="checkbox"> checkbox 2</li>
    <li><input type="checkbox"> checkbox 3</li>
    <li><input type="checkbox"> checkbox 4</li>
    <li><input type="checkbox"> checkbox 5</li>
    <li><input type="checkbox"> checkbox 6</li>
    <li><input type="checkbox"> checkbox 7</li>
    <li><input type="checkbox"> checkbox 8</li>
  </ul>
</div>

Редактировать: вот очень необычный способ сделать то, что я только что сделал. Я нашел этот пример в блоге этого парня: https://codersblock.com/blog/checkbox-trickery-with-css /

Я поместил его в jsfiddle, чтобы вы могли поиграть с ним: https://jsfiddle.net/c0fy4xrj /

Метки: