自定义vuetify文本字段并选择

我想定制 v-text-field v-selecy ,面临一些问题。

我设法定制了 v-文本域 v-select 不像看上去那么容易。

v-选择

<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>

定制 v-文本域

<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>

对于选择,我必须移动到底部,行和右字体图标。有什么好的和平滑的方式来设计它吗?