CSS: Как я могу скруглить поле выбора из раскрывающегося меню?

Я новичок в HTML и CSS, но ничего или почти ничего не могу найти по этому вопросу. У меня есть выпадающее меню, которое уже имеет закругленные углы. Но как мне сделать так, чтобы варианты были в закругленной рамке?

введите здесь описание изображения

(Это квадратное поле должно быть закруглено)

select{
  width: 285px;
  height: 40px;
  margin-top: 20px;
  border-color: purple;
  cursor: pointer;
  border-radius: 20px;
 }
<div>
  <select name="color" class="selectBox" id="color">
    <option value="" disabled hidden selected>select color</option>
    <option value="red"> red </option>
    <option value="blue"> blue </option>
    <option value="green"> green </option>
    <option value="yellow"> yellow </option>
  </select>
</div>


person Klippspringer    schedule 26.01.2021    source источник
comment
Я бы рекомендовал вам прочитать этот вопрос: stackoverflow.com/questions/8927974/   -  person alapaah    schedule 26.01.2021
comment
вы хотите округлить теги параметров?   -  person s.kuznetsov    schedule 26.01.2021
comment
Демонстрация 3 по этой ссылке является своего рода округленное меню, если это то, что вы ищете.   -  person Insula    schedule 26.01.2021
comment
@s.kuznetsov да   -  person Klippspringer    schedule 26.01.2021
comment
посмотрите, пожалуйста - select2.org/options   -  person s.kuznetsov    schedule 26.01.2021


Ответы (2)


tl;dr: Вы не можете этого сделать.

Этот ящик управляется ОС. Если вы хотите стилизовать параметры, вам нужно написать свой собственный html или использовать сторонние компоненты.

person Mücahit Inel    schedule 26.01.2021
comment
Хорошо, это также объясняет, почему я не мог найти так много об этом. - person Klippspringer; 26.01.2021

раскрывающиеся списки контролируются операционной системой пользователя, поэтому полная стилизация этих элементов невозможна. Вы можете добиться аналогичного эффекта, используя элементы HTML <li> и добавив к ним JS для создания раскрывающегося списка, а также добавив пару основных эффектов перехода.

person Allen Al-Shamali    schedule 26.01.2021