Теги опций стиля

Ответ 1

Я знаю, что этот вопрос немного старый (или не новый, по крайней мере), но я хотел бы показать очень простой способ эмулировать элемент select, а не использовать "плагин замены", как предлагается в Как настроить параметр html "select" ?.

Есть, вероятно, много, МНОГО способов сделать это, но я стараюсь держать вещи чрезвычайно простыми, поэтому в моем методе эмуляции используется только CSS. Это довольно голые кости, но я хотел бы отметить, что это не сложно, так что вам может не понадобиться подключаться к нему.

Примечание1: Вместо использования <option> я использовал <label>. Так как <label> является интерактивным элементом, размещение чего-то интерактивного внутри (например, <button>), вероятно, испортит его. Опции, как правило, не являются интерактивными, но просто имейте в виду, что эта простая эмуляция не может делать все.

Примечание2: Если вы хотите выбрать несколько параметров, просто выполните поиск по "радио" и замените "флажок".

Эмулировать выбор с помощью радио - без сбоев

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  background-color: black;
  color: #28AADC;
}

/* none functional styles.  just regular styling */
.radio_select {
  background-color: #28AADC;
  display: inline-block;
}

<div class="radio_select">
  <div>
    <input id="rad1" type="radio" name="radio_select" />
    <label for="rad1">Option 1</label>
  </div>

  <div>
    <input id="rad2" type="radio" name="radio_select" checked="checked" />
    <label for="rad2">Option 2</label>
  </div>
  
  <div>
    <input id="rad3" type="radio" name="radio_select" />
    <label for="rad3">Option 3</label>
  </div>
</div>