Помощь select в несколько колонок

saine · 03.09.16

Доброе утро , кто сможет помочь допилить код ,select в несколько колонок .

HTML:

<div class="styled-select">
 <select name="" value=" Сделайте выбор" id="selectCar">
 <option value="">Сделайте выбор </option>
 <option value="img_acura">Acura</option>
 <option value="img_aston">Aston_Martin</option>
 <option value="img_alfa_romeo">Alfa_Romeo</option>
<option value="img_audi">Audi</option>
</select>

/***Выпадающий список ***/

.styled-select {
width: 180px;
height: 36px;
overflow: hidden;
background: url(http://dizzre7r.bget.ru/uploads/brand-logo/down_arrow_select.jpg) no-repeat right #ddd;
border: 1px solid #ccc;
}

.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}

Если возможно то желательно только с помощью css , но готов выслушать все варианты .

Примерно что бы было так ...

koksnull · 09.06.24

Можно использовать optgroup, но так как у Вас на скрине, не получится сделать только на css

torss27 · 09.10.24

selectize.js не подходит?

Semyon__ykt · 16.10.24

Создание выпадающего списка с несколькими колонками с помощью только CSS невозможно, так как элемент <select> не поддерживает многоуровневое отображение опций.

HTML:

<div class="styled-select">
    <div class="select-box">
        <span class="selected">Сделайте выбор</span>
        <div class="options-container">
            <div class="option-group">
                <div class="option">Acura</div>
                <div class="option">Aston Martin</div>
            </div>
            <div class="option-group">
                <div class="option">Alfa Romeo</div>
                <div class="option">Audi</div>
            </div>
        </div>
    </div>
</div>

CSS:

.styled-select {
    width: 180px;
    position: relative;
}

.select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    cursor: pointer;
}

.options-container {
    display: none; /* Скрываем опции по умолчанию */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 1;
}

.option-group {
    display: flex; /* Используем флекс для колонок */
}

.option {
    padding: 10px;
    cursor: pointer;
}

.option:hover {
    background-color: #f0f0f0; /* Подсветка при наведении */
}

/* Показать опции при клике на select-box */
.select-box:hover + .options-container,
.options-container:hover {
    display: block;
}

XGrid · Вчера в 15:03

@saine , вот пример, только тут с JS, на чистом CSS + HTML не получится реализовать задуманное.

HTML:

<div class="technology-select">

    <!-- Кнопка открытия -->
    <button type="button" class="technology-select__button">
        <span class="technology-select__button-text">Technology Sites</span>
        <span class="technology-select__arrow">▼</span>
    </button>


    <!-- Настоящий select -->
    <select name="technology_site" class="technology-select__native">

        <option value="">Сделайте выбор</option>

        <optgroup label="Web Development">
            <option value="javascript_kit">JavaScript Kit</option>
            <option value="dynamic_drive">Dynamic Drive</option>
            <option value="css_drive">CSS Drive</option>
            <option value="coding_forums">Coding Forums</option>
            <option value="dom_reference">DOM Reference</option>
        </optgroup>

        <optgroup label="News Related">
            <option value="cnn">CNN</option>
            <option value="msnbc">MSNBC</option>
            <option value="google">Google</option>
            <option value="bbc_news">BBC News</option>
        </optgroup>

        <optgroup label="Technology">
            <option value="news_com">News.com</option>
            <option value="slashdot">SlashDot</option>
            <option value="digg">Digg</option>
            <option value="tech_crunch">Tech Crunch</option>
        </optgroup>

    </select>


    <!-- Кастомное меню -->
    <div class="technology-select__dropdown">

        <div class="technology-select__grid">

            <!-- Web Development -->
            <div class="technology-select__group">

                <div class="technology-select__heading">Web Development</div>

                <button type="button" data-value="javascript_kit">JavaScript Kit</button>
                <button type="button" data-value="dynamic_drive">Dynamic Drive</button>
                <button type="button" data-value="css_drive">CSS Drive</button>
                <button type="button" data-value="coding_forums">Coding Forums</button>
                <button type="button" data-value="dom_reference">DOM Reference</button>

            </div>

            <!-- News Related -->
            <div class="technology-select__group">

                <div class="technology-select__heading">News Related</div>

                <button type="button" data-value="cnn">CNN</button>
                <button type="button" data-value="msnbc">MSNBC</button>
                <button type="button" data-value="google">Google</button>
                <button type="button" data-value="bbc_news">BBC News</button>

            </div>

            <!-- Technology -->
            <div class="technology-select__group">

                <div class="technology-select__heading">Technology</div>

                <button type="button" data-value="news_com">News.com</button>
                <button type="button" data-value="slashdot">SlashDot</button>
                <button type="button" data-value="digg">Digg</button>
                <button type="button" data-value="tech_crunch">Tech Crunch</button>

            </div>

            <!-- Web Development -->
            <div class="technology-select__group">

                <div class="technology-select__heading">Web Development</div>

                <button type="button" data-value="javascript_kit">JavaScript Kit</button>
                <button type="button" data-value="dynamic_drive">Dynamic Drive</button>
                <button type="button" data-value="css_drive">CSS Drive</button>
                <button type="button" data-value="coding_forums">Coding Forums</button>
                <button type="button" data-value="dom_reference">DOM Reference</button>

            </div>


            <!-- News Related -->
            <div class="technology-select__group">

                <div class="technology-select__heading">News Related</div>

                <button type="button" data-value="cnn">CNN</button>
                <button type="button" data-value="msnbc">MSNBC</button>
                <button type="button" data-value="google">Google</button>
                <button type="button" data-value="bbc_news">BBC News</button>

            </div>


            <!-- Technology -->
            <div class="technology-select__group">

                <div class="technology-select__heading">Technology</div>

                <button type="button" data-value="news_com">News.com</button>
                <button type="button" data-value="slashdot">SlashDot</button>
                <button type="button" data-value="digg">Digg</button>
                <button type="button" data-value="tech_crunch">Tech Crunch</button>

            </div>

        </div>

    </div>

</div>

CSS:

.technology-select {
    position: relative;
    width: 580px;
    font-family: Arial, sans-serif;
    font-size: 13px;
}


/*
 * Кнопка
 */
.technology-select__button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 2px 7px;
    background: #ffb000;
    border: 1px solid #ff7b00;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #000;
    cursor: pointer;
}


/*
 * Стрелка
 */
.technology-select__arrow { font-size: 9px; }


/*
 * Настоящий select.
 *
 * Он используется для хранения выбранного значения
 * и отправки его через форму.
 */
.technology-select__native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/*
 * Выпадающее меню
 */
.technology-select__dropdown {
    display: none;
    position: absolute;
    top: 27px;
    left: 0;
    width: 580px;
    padding: 8px 7px 12px;
    background: #fff;
    border: 3px solid #ff7b00;
    z-index: 1000;
}


/*
 * Открытое меню
 */
.technology-select.is-open .technology-select__dropdown { display: block; }


/*
 * 3 колонки
 */
.technology-select__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5px;
    row-gap: 8px;
}


/*
 * Категория
 */
.technology-select__group { min-width: 0; }


/*
 * Заголовок категории
 */
.technology-select__heading {
    height: 16px;
    padding: 1px 5px;
    background: #e5e5e5;
    color: #000;
    font-weight: bold;
    line-height: 14px;
}


/*
 * Пункты
 */
.technology-select__group button {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 5px;
    background: transparent;
    border: 0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 15px;
    text-align: left;
    color: #cc0000;
    cursor: pointer;
}


/*
 * Hover
 */
.technology-select__group button:hover { text-decoration: underline; }


/*
 * Выбранный пункт
 */
.technology-select__group button.is-selected { font-weight: bold; color: #000; }

JavaScript:

document.addEventListener('DOMContentLoaded', function () {

    const select = document.querySelector('.technology-select');
    if (!select) return;

    const button = select.querySelector('.technology-select__button');
    const buttonText = select.querySelector('.technology-select__button-text');
    const nativeSelect = select.querySelector('.technology-select__native');
    const options = select.querySelectorAll('[data-value]');

    /*
     * Открытие / закрытие меню
     */
    button.addEventListener('click', function (event) {
        event.stopPropagation();
        select.classList.toggle('is-open');
    });


    /*
     * Выбор пункта
     */
    options.forEach(function (option) {
        option.addEventListener('click', function () {

            const value = this.dataset.value;

            /*
             * Выбираем соответствующий option
             * в настоящем select
             */
            nativeSelect.value = value;


            /*
             * Меняем текст кнопки
             */
            buttonText.textContent = this.textContent;


            /*
             * Убираем старое выделение
             */
            options.forEach(function (item) {
                item.classList.remove('is-selected');
            });

            /*
             * Выделяем выбранный пункт
             */
            this.classList.add('is-selected');


            /*
             * Закрываем меню
             */
            select.classList.remove('is-open');

            /*
             * Если это используется внутри формы,
             * можно отследить обычное изменение select
             */
            nativeSelect.dispatchEvent(new Event('change', {
                bubbles: true
            }));

        });
    });


    /*
     * Закрываем меню при клике вне него
     */
    document.addEventListener('click', function (event) {
        if (!select.contains(event.target)) {
            select.classList.remove('is-open');
        }
    });
});

Помощь select в несколько колонок

saine

koksnull

torss27

Semyon__ykt

XGrid

Похожие темы