Customizing vuetify text fields and selects

Question

I am trying to customize v-text-field with v-selecy, faced some issues.

I've managed to customize v-text-field - changed fonts, margines, madding etc. Which works nice, but when I've jumped into v-select it's not that easy as it looks.

Here is a code of v-select component:

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

Custom v-text-field

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

For select I have to move to the bottom, line and the right font icon. Is there any good and smooth way to style it ?