Как сделать фон белым не перекрывая основную кнопку?

Question

[toros0w]

Доброго времени суток, уважаемые.
Столкнулся с проблемой.
По дизайну нужно сделать так, что бы опции были ниже самой кнопки, то есть вот так.


Я пытался сделать так, что бы всё стояли ровно, и смог добиться этого только с помощью background-color: none для options.

Вот так выглядит то, что получилось у меня.


Ниже представляю компонент, думаю js не пригодится, поэтому вставлю только template и styles

<template>
  <div :class="['custom-select-wrapper', { open: isOpen }]" @click="toggleDropdown">
    <div class="selected-option">
      {{ selectedOption ? selectedOption.label : 'Categories' }}
    </div>
    <div class="custom-select"></div>
    <img src="/src/assets/icons/CARET_DOWN.svg" alt="" class="custom-sellect-arrow" />
    <div v-if="isOpen" class="options">
      <div
        v-for="option in options"
        :key="option.value"
        class="option"
        @click="selectOption(option)"
      >
        {{ option.label }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.custom-select-wrapper {
  position: relative;
  width: 302px;
  border: 2px solid var(--gray-800);
  border-radius: 20px;
  box-sizing: border-box;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s linear 0.1s;
  font-family: var(--syne);
  font-weight: 400;
  color: var(--gray-800);
  font-size: 16px;
  box-shadow: 12px 12px 0px 0px var(--orange-500);
}
.custom-select-wrapper:hover {
  background-color: var(--yellow-500);
}
.custom-select {
  position: relative;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px 0 30px;
  width: 302px;
  align-items: center;
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  z-index: 1;
}
.custom-sellect-arrow {
  margin-right: 18px;
}
.selected-option {
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.options {
  position: absolute;
  top: 100%;
  /* left: 0; */
  min-width: 302px;
  background-color: none;
  border-right: 2px solid var(--gray-800);
  border-left: 2px solid var(--gray-800);
  border-bottom: 2px solid var(--gray-800);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-top: 35px;
  margin-top: -15px;
  z-index: -1;
}

.option {
  cursor: pointer;
  display: flex;
  justify-content: left;
  padding-left: 22px;
  align-items: center;
  height: 45px;
  background-color: var(--white);
}
.custom-select-wrapper.open {
  background-color: var(--yellow-500);
}
.option:hover {
  background-color: var(--blue-500);
  border-top: 2px solid var(--gray-800);
  border-bottom: 2px solid var(--gray-800);
}
.option:last-child {
  border-bottom-color: transparent;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
</style>

Как добиться результата по дизайну?

P.S. вот что получается, если дать нужный background-color: white вместо none.

Comments

[Ankhena]

P.S. вот что получается, если дать нужный background-color: white вместо none.

С виду осталось разобраться с отступами, радиусами и убрать высоту.

Тень можно заменить на псевдоэлемент и спозиционировать куда надо.

Лучше делайте песочницу с видимой проблемой, такой код плохо компилируется в уме.

Answer 1

[Wispik]

и смог добиться этого только с помощью background-color: none для options.

Почему? А если белый цвет на фон поставить? Как раз должно получиться как в дизайне

Comments

[toros0w]

Только что отредактировал, добавив версию с измененным стилем background-color: white

Продублирую сюда:

[Wispik]

toros0w, ну, а дальше с padding чуть поработать. У selected-option, например. Была бы песочница, проще подсказать было, чем просто по тексту

[Wispik]

toros0w, а, понял, проблема в том, что выпадающее меню перекрывает. До этого вопрос был по другому сформулирован. Сделай песочницу в codepen, тогда быстрее подскажут

[toros0w]

Wispik,

Что то вроде этого

[toros0w]

[Wispik]

toros0w,
что-то типо такого. Суть в том, что стили для кнопки,, надо не для всего блока задавать, а для selected-option. Ну и тень на after переделал, чтобы она сзади была

[toros0w]

Wispik, Большое спасибо!