Как изменить вид переключателей в форме? - PullRequest
Новая
       35

Как изменить вид переключателей в форме?

0 голосов
/ 04 августа 2020

Код: 

<label class="form__label" for="urgency">Urgency</label>

            <input class="form__input no-input-animation" id="urgency" name="urgency" type="radio" required>
                <div class="urgency-text critical">Critical</div>
                <div class="urgency-text high">High</div>
                <div class="urgency-text medium">Medium</div>
                <div class="urgency-text low">Low</div>

Это показывает одну радиокнопку с каждым div срочности как один вариант вместе. Я могу понять, почему.

Я бы хотел, чтобы на моих кнопках не было переключателя, а каждый из div был бы отдельным параметром с атрибутом value.

ПРИМЕР:

Выберите статус :

[Доступен] [Неактивен] [Не беспокоить]

Каждый элемент в квадратных скобках [] кликабелен и имеет свой собственный атрибут значения, например available

Как мне сделать это в форме ?

Спасибо.

1 Ответ

0 голосов
/ 04 августа 2020

Я предлагаю вам сослаться на это в качестве примера. Я считаю, что это именно то, что вы ищете. 

<div class="container">

  <div class="segmented-control" style="width: 100%; color: #5FBAAC">
    <input type="radio" name="sc-1-1" id="sc-1-1-1">
    <input type="radio" name="sc-1-1" id="sc-1-1-2">
    <input type="radio" name="sc-1-1" id="sc-1-1-3" checked>

    <label for="sc-1-1-1" data-value="High">High</label>
    <label for="sc-1-1-2" data-value="Medium">Medium</label>
    <label for="sc-1-1-3" data-value="Low">Low</label>
  </div>

Пример CodePen <- </strong> Это то, что вы ищете.

Посетите этот блог для получения дополнительной информации.

...