[overcod].net / Код / Select в HTML: скрытый placeholder, подсветка и динамический индикатор срочности
78 16.12.2025

Select в HTML: скрытый placeholder, подсветка и динамический индикатор срочности


В HTML-формах часто используют <select> для выбора приоритета или срочности заявки.
Обычно в начале добавляют пункт-подсказку:

—— Срочность ——

Но стандартный вариант имеет проблему: этот текст появляется в выпадающем списке, что выглядит неаккуратно.

Разберем:

  1. стандартный <select>

  2. улучшенный вариант с скрытым placeholder

  3. подсветка select после выбора

  4. динамический индикатор цвета и текста

1. Стандартный вариант

<select name="terminovist" style="width:100%">
  <option>---- Срочность ------</option>
  <option value="low">Низкая</option>
  <option value="medium">Средняя</option>
  <option value="high">Высокая</option>
  <option value="critical">Критическая</option>
</select>

Минусы:

  • Пункт-подсказка появляется в списке

  • Его можно выбрать повторно

  • Не видно реальный выбор

2. Улучшенный вариант с placeholder

<select name="terminovist" style="width:100%">
  <option value="" selected hidden>---- Срочность ------</option>
  <option value="low">Низкая</option>
  <option value="medium">Средняя</option>
  <option value="high">Высокая</option>
  <option value="critical">Критическая</option>
</select>




  • selected — показывает текст по умолчанию

  • hidden — не отображает пункт в списке

  • value="" — корректный placeholder для форм

3. Подсветка текста select после выбора

<style>
select { color: #999; }
select.low { color: green; }
select.medium { color: #555; }
select.high { color: orange; }
select.critical { color: red; font-weight: bold; }
</style>

<select name="terminovist" id="terminovist" style="width:200px">
  <option value="" selected hidden>---- Срочность ------</option>
  <option value="low">Низкая</option>
  <option value="medium">Средняя</option>
  <option value="high">Высокая</option>
  <option value="critical">Критическая</option>
</select>


<script>
const select = document.getElementById('terminovist');
select.addEventListener('change', function () {
  this.className = '';
  if (this.value) {
    this.classList.add(this.value);
  }
});
</script>

4. Динамический индикатор срочности с цветным квадратиком и текстом

<style>
#statusText { font-weight: 600; }
.status-box { width: 16px; height: 16px; border-radius: 3px; background: #ccc; }

.low { color: #a4ffa4; }
.medium { color: #1efb1e; }
.high { color: yellow; }
.critical { color: red; }

.box-low { background: #a4ffa4; }
.box-medium { background: #1efb1e; }
.box-high { background: yellow; }
.box-critical { background: red; }
</style>

<div style="display:flex; align-items:center; gap:10px;">
  <select name="terminovist" id="terminovist" style="width:200px">
    <option value="" selected hidden>---- Срочность ------</option>
    <option value="low" style="background: #a4ffa4;">Низкая</option>
    <option value="medium" style="background: #1efb1e;">Средняя</option>
    <option value="high" style="background: yellow;">Высокая</option>
    <option value="critical" style="background: red;">Критическая</option>
  </select>

  <span id="statusText">Срочность:</span>
  <span id="statusBox" class="status-box"></span>
</div>

<script>
const select = document.getElementById('terminovist');
const statusText = document.getElementById('statusText');
const statusBox = document.getElementById('statusBox');

select.addEventListener('change', function () {
  statusText.className = '';
  statusBox.className = 'status-box';

  if (!this.value) {
    statusText.textContent = 'Срочность:';
    return;
  }

  statusText.classList.add(this.value);
  statusBox.classList.add('box-' + this.value);

  const selectedText = this.options[this.selectedIndex].text;
  statusText.textContent = `${selectedText}`;
});
</script>

Результат

  • Текст «Срочность» меняет цвет в зависимости от выбора

  • Квадратик показывает цвет срочности

  • Текст динамически показывает выбранное значение

  • При смене выбора все обновляется автоматически

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Последние записи в этой категории

Популярные записи