@collab-ui/core/scss/components/select/examples/multi-select.html

Cisco Collab UI CSS Framework

<div class="cui-input-group cui-select">
  <button
    class="cui-button cui-button--36 active cui-button--input"
    alt=""
    type="button"
    aria-labelledby="cui-select-69__label"
    tabindex="0"
    name="cui-select-69"
    aria-haspopup="listbox"
  >
    <span class="cui-button__children" style="opacity: 1;">
      <div class="cui-select__label" id="cui-select-69__label">
        Select Item Here
        <i class="icon icon-arrow-down_16"></i>
      </div>
    </span>
  </button>
  <div class="cui-event-overlay cui-event-overlay--bottom">
    <div class="cui-event-overlay__children" style="top: 904px; left: 272px;">
      <div class="cui-list cui-list--vertical cui-list" role="listbox" aria-labelledby="cui-select-479__label" aria-multiselectable="true"
        style="width: 539px;">
        <div aria-current="false" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="-1" title="test1">
          <div class="cui-input-group cui-checkbox ">
            <input aria-checked="false" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
              value="">
            <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
              <span>test1</span>
            </label>
          </div>
        </div>
        <div aria-current="false" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="-1" title="test2">
          <div class="cui-input-group cui-checkbox ">
            <input aria-checked="true" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
              value="">
            <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
              <span>test2</span>
            </label>
          </div>
        </div>
        <div aria-current="true" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="0" title="test3">
          <div class="cui-input-group cui-checkbox ">
            <input aria-checked="true" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
              value="">
            <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
              <span>test3</span>
            </label>
          </div>
        </div>
        <div aria-current="false" class="cui-list-item" id="cui-list-489__so-item" role="option" tabindex="-1" title="test4">
          <div class="cui-input-group cui-checkbox ">
            <input aria-checked="false" class="cui-input cui-checkbox__input" type="checkbox" name="" tabindex="0" id="cui-list-489__so-item__checkbox"
              value="">
            <label class=" cui-checkbox__label" for="cui-list-489__so-item__checkbox">
              <span>test4</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>