Vuejs2 自定义vuetify文本字段并选择

我试图用

v-selecy

自定义

v-text-field

，但遇到了一些问题

我已经成功地定制了

v-text-field

——更改了字体、margines、madding等，效果很好，但当我跳入

v-select

时，它并不像看上去那么容易

以下是

v-select

组件的代码：

<template>
    <v-select
            class="header-multi-select"
            label="Chips"
            hide-details="true"
            height="16"
            attach
            chips
            multiple
    ></v-select>
</template>

<script>
    export default {
        name: 'HeaderMultiSelect'
    }
</script>

<style scoped>
    .header-multi-select >>> i {
        font-size: 16px;
    }

    .header-multi-select >>> label {
        font: 500 12px "Inter UI";
        color: #33373E;
        line-height: 16px;
        top: 16px;
    }
</style>

对于“选择”，我必须移动到底部、行和右侧字体图标。有什么好的、流畅的方式来设计它吗

<template>
    <v-text-field
            class="header-text-field-input"
            hideDetails="true"
            :label="label"
            :append-icon="icon"
    ></v-text-field>
</template>

<script>
    export default {
        name: "HeaderTextField",
        props: {
            label: {
                type: String,
                required: true
            },
            icon: {
                type: String,
                required: true
            }
        }
    }
</script>

<style scoped>
    .header-text-field-input >>> i {
        font-size: 16px;
    }

    .header-text-field-input >>> label {
        font: 500 12px "Inter UI";
        color: #33373E;
        line-height: 16px;
        top: 3px;
    }

    .header-text-field-input >>> input {
        height: 16px;
        font: 500 12px "Inter UI";
        color: #33373E;
        line-height: 16px;
    }
</style>