0

У меня есть макет. В нем есть SELECT . Вот так все это выглядит

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

Я не понимаю как мне задать отдельно стиль стрелочке с выбором и отдельно фону. Там где стрелочка там идет градиент, и остальная часть сплошной цвет. Вот мой компонент select:

<template>
  <div class="v-select-underlying">
    <label class="block" for="Underlying">{{ label }}</label>

    <select
      class="select w-full border border-gray-300 px-3 py-2 rounded-lg shadow-sm focus:outline-none focus:border-gray-300 focus:ring-1 focus:ring-gray-300"
      id="select"
      v-model="selected"
      @change="onChangeSelect"
      @input="throttledSave"
    >
      <option v-for="item in options" :value="item" :key="item">
        {{ item }}
      </option>
    </select>
  </div>
</template>

<script>
import throttle from "../../../throttle.js";

import { mapState } from "vuex";

export default {
  name: "v-select",

  props: {
    modelValue: {
      type: String,
      default: "",
    },

    options: {
      type: Array,
      default: () => [],
    },

    label: {
      type: String,
      default: "",
    },
  },

  emits: ["change", "input", "upAmount", "update:modelValue"],

  data() {
    return {
      selected: this.modelValue,
      timerId: null,
    };
  },

  watch: {
    modelValue(newValue) {
      this.selected = newValue;
    },
  },

  ...mapState({
    underlying: (state) => state.underlying,
    maturity: (state) => state.maturity,
  }),

  methods: {
    onChangeSelect() {
      this.$emit("update:modelValue", String(this.selected));
      this.$emit("change", String(this.selected));
    },

    throttledSave() {
      let DELAY = 1000; // Задержка
      clearTimeout(this.timerId);
      this.timerId = setTimeout(() => {
        this.$emit("upAmount", this.selected);
      }, DELAY);
    },
  },
};
</script>
<style scoped>
.select {
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
}
</style>
3
  • скиньте ссылку на песочницу или скомплированный код 21 июл 2021 в 9:57
  • codepen.io/dudashvili-vladislav/pen/qBmXGZm
    – yOz
    21 июл 2021 в 10:34
  • Просто понять бы как можно менять этот select background: rgba(0, 0, 0, 0.1); border-radius: 4px; Это настройки для бэкграунда где находится выпадающий список. А это настройки самой стрелки background: linear-gradient(270deg, #8743FF 0%, #4136F1 100%); border-radius: 0px 4px 4px 0px;
    – yOz
    21 июл 2021 в 10:35

1 ответ 1

0
.select_box{
  width: 200px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  padding: 10px 0;
}
.select_box:after{
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #f00;
  position: absolute;
  top: 40%;
  right: 5px;
  content: "";
  z-index: 98;
 }
.select_box select{
  width: 220px;
  border: 0;
  position: relative;
  z-index: 99;
  background: none;
}

<div class="select_box">
 <select>
   <option>Test This Select</option>
   <option>Test This Select</option>
 </select>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.