Раскрывающийся список

select
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно костомизировать раскрывающиеся списки форм

Описание

Настройте собственные select с помощью настраиваемого CSS,который изменяет первоначальный внешний вид элемента.

По умолчанию

Для настраиваемых меню select требуется только настраиваемый класс .form-select для запуска настраиваемых стилей. Пользовательские стили ограничены начальным внешним видом select и не могут изменять option из-за ограничений браузера.

<select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" aria-label="Пример раскрывающегося списка">
	<option selected>Откройте раскрывающийся список</option>
	<option value="1">Один</option>
	<option value="2">Два</option>
	<option value="3">Три</option>
</select>

Размеры

Вы также можете выбрать из маленького или большого пользовательского выбора, чтобы соответствовать нашим текстовым полям аналогичного размера.

<select class="w-full block weight-4 appearance-none transition p-top-1/2 p-bottom-1/2 p-right-1 p-left-1 text-2 radius-1/2 color-on-surface bg-surface-0 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none m-bottom-1" aria-label="Пример большого списка выбора">
	<option selected>Откройте раскрывающийся список</option>
	<option value="1">Один</option>
	<option value="2">Два</option>
	<option value="3">Три</option>
</select>

<select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/3 p-left-1/3 text-1/2 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" aria-label="Пример маленького списка выбора">
	<option selected>Откройте раскрывающийся список</option>
	<option value="1">Один</option>
	<option value="2">Два</option>
	<option value="3">Три</option>
</select>

Атрибут multiple также поддерживается:

<select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" multiple aria-label="Пример множественного списка выбора">
	<option selected>Открытый раскрывающийся список</option>
	<option value="1">Один</option>
	<option value="2">Два</option>
	<option value="3">Три</option>
</select>

Как и атрибут размерности size :

<select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-0 border-1 border-surface-lowest" size="3" aria-label="size 3 select example">
	<option selected>Открытый раскрывающийся список</option>
	<option value="1">Один</option>
	<option value="2">Два</option>
	<option value="3">Три</option>
</select>

Отключено

Добавьте disabled атрибут, чтобы придать ему неактивный вид.

<select class="w-full block weight-4 appearance-none transition p-top-1/3 p-bottom-1/3 p-right-1/2 p-left-1/2 text-1 radius-1/3 color-on-surface bg-surface-2 border-1 border-surface-lowest bg-origin-padding bg-arrow-down bg-right-b2 bg-repeat-none" aria-label="Пример выключенного списка" disabled>
	<option selected>Откройте раскрывающийся список</option>
	<option value="1">Один</option>
	<option value="2">Два</option>
	<option value="3">Три</option>
</select>

Адаптивность

Для установки адаптивности элементов формы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью