Border-radius выподающему меню

Question

Border-radius выподающему меню

Maksim Fominov Ученик (112), на голосовании 1 месяц назад

Подскажите пожалуйста как можно сделать закругление выпадающему меню select

Answer 1

Нептун канализации Мастер (1031) 2 месяца назад

 select { 
            border-radius: 8px;
        } 
 
/* Для опций внутри select
        select option { 
            border-radius: 8px;

Maksim FominovУченик (112) 2 месяца назад

Не помогло к сожалению

Maksim Fominov, селект ваще не поддается ксс-ке в 90% случаев...

Answer 2

 select { 
    border-radius: 10px; /* Установите радиус закругления */ 
    border: 1px solid #ccc; /* Добавьте границу для лучшего визуального эффекта */ 
    padding: 5px; /* Добавьте отступы для улучшения внешнего вида */ 
}

Этот код применяет закругление к элементу <select>, улучшая его внешний вид. Убедитесь, что другие стили не конфликтуют с этим свойством.

Answer 3

Нормальной стилизации для опций select, средствами css сделать не возможно. Это можно сделать, например, через JS.

Можешь посмотреть пример, как реализовать подобное в песочницах. Вот тебе пару примеров работ из codepen

https://codepen.io/webDsign/pen/yLgVJqX
https://codepen.io/davaynamore/pen/jVmEeX

Как это работает?
Подключается скрипт, в данном случае на чистом JavaScript, данный скрипт видит твои option и выполняет их замену например на список ul>li. С которыми ты можешь уже спокойно работать и обращаться к ним через css.

Там же, ты можешь просто скопировать к себе код в проект и вставить. стили настроишь под себя.