텍스트 필드 사용자 정의 및 선택

텍스트 필드 사용자 정의 및 선택

커스터마이즈하려고 합니다.v-text-field와 함께v-selecy는 몇 가지 문제에 직면했습니다.

커스터마이즈 할 수 있었습니다.v-text-field- 폰트, 마진, 매딩 등을 변경.잘 먹히긴 하는데, 내가 뛰어들었을 때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>

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

선택한 경우 맨 아래, 줄 및 오른쪽 글꼴 아이콘으로 이동해야 합니다.매끈하게 스타일링 할 수 있는 방법이 있을까요?

언급URL : https://stackoverflow.com/questions/51521828/customizing-vuetify-text-fields-and-selects