Zenn
🏑

Vuetify の textfields の文字サイズなどを変える

に公開
CSS
Vue.js
Vuetify
Vite
Vuetify 3
tech

概要

Vuetify の textfields の文字サイズなど細かなスタイルを変更するにはひと手間必要です😴CSS を使えばなんとか変更を実現することができます。

結論

以下のような CSS を作って textfield コンポーネントに適用しました。

.custom .v-field {
  font-size: 14px;
  border-radius: 8px;
}
.custom input {
  font-size: 0.875rem;
}
.custom .v-label {
  font-size: 14px;
}

.custom .v-label.v-field-label--floating {
  --v-field-label-scale: 0.75em;
  font-size: var(--v-field-label-scale);
  visibility: hidden;
  max-width: 100%;
}

背景

Vuetify の textfields 含む input 系のコンポーネントはとても便利です。しかし、モダンな・一般的なアプリケーションの input コンポーネントに比べると文字や本体のサイズがデカくなっていて、私はそれに違和感を感じます。以下は他アプリとの比較です（数値は正確でないです！）。

アプリ フォントサイズ 高さ
Vuetify 16px 56px（density: compact 適用時：40px）
Github 14px 28px
OpenAI 14px 約32px
Notion 14px 28px

OpenAI スタイルの textfield を作ることを目標にしました。

CSS をいじろう

しかし、Vuetify の Utility classes を駆使するだけではこれを実現できませんでした🤦‍♂️そこで CSS を用いてコンポーネントの入れ子に入り込んでスタイルをコントロールしました。

以下のコードは概要のものと同じです。

まとめ

うまいこと表現したかった形にアジャストできました。

Stackblitz のコードサンプル：https://stackblitz.com/edit/vitejs-vite-urgkwxj7?file=src%2Fstyle.css

Discussion