[overcod].net / Код / Select в HTML: прихований placeholder, підсвічування і динамічний індикатор терміновості
216 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>

Результат

  • Текст «Терміновіст» змінює колір залежно від вибору

  • Квадратик відображає колір терміновості

  • Текст динамічно показує вибране значення

  • При зміні вибору все оновлюється автоматично

Залиште коментар(2)

  • Вау!!! Дуже файний код. Дякую. Останій приклад взагалі классний.
    А як зробити обов’язковим для заповнення?

    Відповісти
    Розміщено: 15.01.2026

    • Дякую, дуже приємно. Треба прописати “required” в < select >
      А також, пропоную Вам подивитись на цю статью, там все є.

      <select name="terminovist" id="terminovist" style="width:200px" required>
      <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>
      Розміщено: 15.01.2026

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Останні записи у цій категорії

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