select в несколько колонок

[saine]

Доброе утро , кто сможет помочь допилить код ,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>

Спойлер: Css

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

.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]

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

 

[torss27]

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

 

[Semyon__ykt]

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

<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>

.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;
}