vuetifyのv-text-fieldでreverseタグを使用したときのlabelの位置の変更方法。

Question

Nuxt.jsのUIフレームワークとしてVuetify.jsを使用しています。
v-text-fieldでreverseタグを使用し、
入力値を右寄せにすると下記のようにラベルも右寄せとなってしまいます。

ラベルは左寄せにし、入力値は右寄せにしたいと思い
下記のようにコードを作成しました。

下記はtemplate部分です。

<v-text-field
  class="label-left"
  reverse
  label="TOTAL"
  persistent-placeholder
  dense
  outlined
  v-model="totalCost"
></v-text-field>

style部分として下記のように追記しました。

<style lang="scss" scoped>
div ::v-deep .v-label.v-label--active.theme--light {
  left: 0 !important;
  transform-origin: top left !important;
  position: absolute !important;
}
</style>

ただ実行結果は下記のようになり、ラベルは左寄せになったものの
border部分に被ってしまっています。

ブラウザ(chrome)のデブツールでみても
解決策が分からず、困っております。
どうすれば、ラベルを左寄せにし、borderの位置もラベルに合わせられるのか、
どなたかご教示いただけますと幸いです。

Answer 1

vuetifyについてはよくわからず、展開されたHTMLやCSSが見つからなかったので確証はないですが、おそらくその空白はlegend要素だと思います。
推測ですが、マージンで動かしているならば、以下のような感じにするとどうでしょうか。

legend {
  margin-right: auto;
  margin-left: 0;
}

Comments

[takochan1192]

ありがとうございます。legend要素でした。

[Lhankor_Mhy]

お役に立てたようで何よりです