У меня есть макет. В нем есть 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>