Select
Стандартный HTML-тег <select><cb-select>
<dialog class="cb-modal cb-marker"></dialog>
<select hidden>
<option value="1">Опция 1</option>
<option value="2">Опция 2</option>
<option value="3">Опция 3</option>
<option value="4">Опция 4</option>
</select>
<button class="cb-button-board cb-select">Опция 1</button>
</cb-select>Select multiple
<cb-select>
<dialog class="cb-modal cb-permanent cb-marker" open></dialog>
<select hidden multiple>
<option value="1" selected>Опция 1</option>
<option value="2">Опция 2</option>
<option value="3">Опция 3</option>
<option value="4" selected>Опция 4</option>
</select>
<button hidden>Опция 1</button>
</cb-select>select size="3"
Выбирая размерsize, укажите его в переменной --select-size.
<cb-select>
<dialog class="cb-modal cb-permanent cb-marker" open style="--select-size: 3"></dialog>
<select hidden size="3">
<option value="1" selected>Опция 1</option>
<option value="2">Опция 2</option>
<option value="3">Опция 3</option>
<option value="4" selected>Опция 4</option>
</select>
<button hidden>Опция 1</button>
</cb-select>Атрибуты
data-tagafter
Добавит в конец опции тег, подсветив активную опцию галочкой. Варианты тегов: cb-checkbox, cb-toggle и cb-radio
<cb-select data-tagafter="cb-checkbox">
<dialog class="cb-modal cb-permanent" open></dialog>
<select hidden multiple>
<option value="1" selected>Опция 1</option>
<option value="2">Опция 2</option>
<option value="3">Опция 3</option>
<option value="4" selected>Опция 4</option>
</select>
<button hidden>Опция 1</button>
</cb-select>data-tagbefore
Добавит в начало опции тег, подсветив активную опцию галочкой. Варианты тегов: cb-checkbox, cb-toggle и cb-radio
<cb-select data-tagbefore="cb-radio">
<dialog class="cb-modal cb-permanent" open></dialog>
<select hidden multiple>
<option value="1" selected>Опция 1</option>
<option value="2">Опция 2</option>
<option value="3">Опция 3</option>
<option value="4" selected>Опция 4</option>
</select>
<button hidden>Опция 1</button>
</cb-select>icon=svgid
Опция с svg иконкой. Значение атрибута icon ссылается на id svg иконки.
<option icon="iconName"></option>
<svg id="iconName"></svg>data-output
Для кастомизации кнопки - возможность указать внутри кнопки элемент для отображения в нем значения выбранной опции.
Class
cb-permanent
В комбинации с атрибутом
open для постоянно открытых multipe и sizecb-marker
Для подсветки активных опций вертикальной чертой.