Розкривні списки

Розкривний список — це список, з якого можна обрати одну або кілька позицій. Позицію обирають клацанням миші.

Меню з варіантами вибору створюється за допомогою контейнерного тегу <select>. Всередині цього тегу розміщуються контейнери <option> — по одному для кожної позиції списку.

Базова структура розкривного списку ↑ до змісту

Загальний вигляд коду:

<select id="id0" name="name0" size="n" multiple="multiple">
  <option value="text1" selected="selected">
    Текст позиції 1
  </option>
  <option value="text2">
    Текст позиції 2
  </option>
  ...
</select>

Копіювати

Морська кастомна стилізація select ↑ до змісту

Стилізація в морській гамі: глибокий синій, бірюзовий, світлі хвилі. Градієнт, тіні та анімація створюють відчуття океану.

HTML-код кастомного select ↑ до змісту

<div class="custom-select-wrapper">
    <select>
        <option value="ua">Україна</option>
        <option value="pl">Польща</option>
        <option value="de">Німеччина</option>
        <option value="fr">Франція</option>
    </select>
</div>

Копіювати

CSS-код з докладними коментарями ↑ до змісту

/* Обгортка для позиціонування стрілки */
.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 300px;
}

/* Сам select */
.custom-select-wrapper select {
    appearance: none;                /* прибираємо стандартний вигляд */
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 14px 50px 14px 20px;    /* великі відступи */
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #0077b6, #00b4d8); /* морський градієнт */
    border: none;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 4px 15px rgba(0, 119, 182, 0.4);
    transition: all 0.3s ease;
}

/* Ефект при наведенні */
.custom-select-wrapper select:hover {
    box-shadow: 0 6px 20px rgba(0, 119, 182, 0.6);
    transform: translateY(-2px);
}

/* Фокус */
.custom-select-wrapper select:focus {
    box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.5);
    transform: translateY(-2px);
}

/* Стрілка */
.custom-select-wrapper::after {
    content: "▼";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #fff;
    font-size: 16px;
    transition: transform 0.3s;
}

/* Анімація стрілки при наведенні */
.custom-select-wrapper:hover::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Опції (випадаюче меню) */
.custom-select-wrapper select option {
    background: #ffffff;
    color: #023047;
    font-weight: normal;
    padding: 10px;
}

/* Опції у темній темі */
[data-theme="dark"] .custom-select-wrapper select option {
    background: #0f2d45;
    color: #d0e8ff;
}

Копіювати