I am trying to customize v-text-field with v-select but I'm facing some issues.
I've managed to customize v-text-field - changed fonts, margins, padding 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 v-select, I have to move to the bottom, line and the right font icon. Is there any good and easier way to style it?