Как сделать выбор варианта ответов в css

Как сделать выбор варианта ответов в css

Тег позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега , который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге , а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега , который должен быть вложен в контейнер . Если планируется отправлять данные списка на сервер, то требуется поместить элемент внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

Список множественного выбора

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

Синтаксис

 Пункт 1 Пункт 2 

Атрибуты

accesskey Позволяет перейти к списку с помощью некоторого сочетания клавиш. autofocus Устанавливает, что список получает фокус после загрузки страницы. disabled Блокирует доступ и изменение элемента. form Связывает список с формой. multiple Позволяет одновременно выбирать сразу несколько элементов списка. name Имя элемента для отправки на сервер или обращения через скрипты. required Список обязателен для выбора перед отправкой формы. size Количество отображаемых строк списка. tabindex Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

       
 Выберите героя Чебурашка Крокодил Гена Шапокляк Крыса Лариса 
  

Выпадающий список HTML

Выпадающий список в HTML можно сделать при помощи тега select. Помимо выпадающего (или «раскрывающегося») списка, тег select позволяет создавать элемент-список с множественным выбором. Синтаксис использования тега select HTML выглядит следующим образом:

 Электроник Сыроежкин Чижиков Кукушкина 

Здесь с помощью тега option задаются элементы списка.

Атрибуты тега SELECT

Рассмотрим атрибуты тега select:

• name
• size — число отображаемых строк в списке (число);
• multiple — включает функцию множественного выбора элементов выпадающего списка;
• disabled — блокирует доступ к элементу;
• form — позволяет связать выпадающий список с формой (может понадобиться, если сам список находится вне формы, к которой должен быть привязан). В качестве аргумента передается id формы.

Пожалуй, это все основные атрибуты тега select, которые чаще всего используются. Посмотрим теперь, как сделать выпадающий список в HTML с использованием указанных атрибутов:

     
 
 Электроник Сыроежкин Чижиков Кукушкина   

Атрибуты тега OPTION

Тег option, как уже отмечалось, позволяет определить дочерние элементы выпадающего списка select, который, в свою очередь, играет роль контейнера. Тег option имеет собственные атрибуты:

• disabled — устанавливает запрет на выбор данного элемента списка;
• label — позволяет установить метку для текущего элемента списка (вместо текста, указанного в теге, выводится значение метки, что позволяет выводить сокращенное значение); Внимание: атрибут не поддерживается в браузере Firefox
• selected — текущий пункт списка будет выбран по умолчанию;
• value — значение, которое будет передано на сервер;

Посмотрим на расширенный вариант использования тега option:

 Господин Электроник Сыроежкин Чижиков Кукушкина 

Выглядеть результат приведенного примера будет следующим образом:

В конструкторе сайтов «Нубекс» есть возможность создавать произвольные формы с помощью модуля конструктора форм. Работа выпадающих списков в «Нубекс» описана в статье: Добавление поля выбора

Тег HTML выпадающий список

Тег в HTML используется для создания выпадающего списка в HTML форме.

С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).

Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name ), содержащая значение выбранного пункта списка. Если в выбранном пункте списка есть атрибут value , то значением считается его содержимое, в противном случае значением считается содержимое тега .

Синтаксис

элементы списка

Примеры использования выпадающего списка в HTML коде

Ниже представлены 4 основных варианта выпадающих списков HTML.

Простой HTML выпадающий список

HTML код простого выпадающего списка

 
Синий 
Зеленый 
Желтый 
Красный 
Оранжевый 
Черный 

Выпадающий список с выбором нескольких значений

Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple . Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size .

Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]» .

HTML код выпадающего списка с выбором нескольких значений

 
Nissan 
Toyota 
BMW 
Wolksvagen 
Skoda 
Mercedes-Benz 

Раскрывающийся список с группами пунктов

HTML код раскрывающегося списка с группами пунктов

 
 
Москва 
Санкт-Петербург 
Новосибирск 
 
Киев 
Харьков 
Львов 
 
Минск 
Бобруйск 
Гомель 

HTML список обязательный для заполнения (выбора)

Для того, чтобы создать список select , обязательный для заполнения ( список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required , а также добавить внутрь списка первым пунктом с пустым значением атрибута value .

HTML код выпадающего списка обязательного для выбора (заполнения)

 
Выберите значение 
Синий 
Зеленый 
Желтый 
Красный 
Оранжевый 
Черный 

Поддержка браузерами

Тег
	Да	Да	Да	Да	Да

Атрибуты тега select

Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.

Логический атрибут. Если указан, делает список неактивным.

Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).

Указывает на форму, к которой относится список. Используется, если список находится вне HTML кода формы.

Если список находится внутри тега , то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.

Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.

Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.

Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.

Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.

Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.

Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.

Select input в css

Подскажите пожалуйста один момент, мне нужно сделать с помощью select и option выпадающий список, но в нем нужно перед каждым выбором значения сделать статичный текст Порядок: как на скрине, так же этого текста не должно быть в вариантах выбора так же как на скрине

Отслеживать

задан 19 июл в 18:23

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Для такого эффекта можно добавлять выбранному пункту класс который имеет свойство display: none . Демо (код взят отсюда и дополнен):

let selectContainer = document.querySelector(".select-container"); let select = document.querySelector(".select"); let input = document.getElementById("input"); let options = document.querySelectorAll(".option"); select.onclick = () => < selectContainer.classList.toggle("active"); >; options.forEach((e) => < e.addEventListener("click", () => < input.value = e.innerText; selectContainer.classList.remove("active"); options.forEach((e) =>< e.classList.remove("selected"); >); e.classList.add("selected"); >); >);

* < padding: 0; margin: 0; box-sizing: border-box; font-family: "Courier New"; >body < background: #edeeff; height: 100vh; display: flex; justify-content: center; align-items: center >.select-container < position: relative; margin: 0 auto; width: 400px; display: flex; >.select-container .select < position: relative; background: #0f0e11; height: 60px; >.select-container .select::after < position: absolute; content: ""; width: 15px; height: 15px; top: 50%; right: 15px; transform: translateY(-50%) rotate(45deg); border-bottom: 2px solid white; border-right: 2px solid white; cursor: pointer; transition: border-color 0.4s; >.select-container.active .select::after < border: none; border-left: 2px solid white; border-top: 2px solid white; >.select-container .select input < position: relative; width: 100%; height: 100%; padding: 0 15px; background: none; outline: none; border: none; font-size: 1.4rem; color: white; cursor: pointer; >.select-container .option-container < position: relative; background: #6e6477; height: 0; overflow-y: scroll; transition: 0.4s; >.select-container.active .option-container < height: 120px; >.select-container .option-container::-webkit-scrollbar < border-left: 1px solid rgba(0, 0, 0, 0.2); width: 10px; >.select-container .option-container::-webkit-scrollbar-thumb < background: #0f0e11; >.select-container .option-container .option < position: relative; padding-left: 15px; height: 60px; border-top: 1px solid rgba(0, 0, 0, 0.3); cursor: pointer; display: flex; align-items: center; transition: 0.2s; >.select-container .option-container .option.selected < background: rgba(0, 0, 0, 0.5); pointer-events: none; display: none; >.select-container .option-container .option:hover < background: rgba(0, 0, 0, 0.2); padding-left: 20px; >.select-container .option-container .option label < font-size: 1.1rem; color: white; cursor: pointer; >.text < width: 100px; margin: 20px 10px 0; >.select-options

 
Порядок:
 
 
 
 
Сперва новые 
 
Сначала дорогие 
 
Сначала дешевые