概要
Vuetifyのv-text-fieldの入力文字の色はデフォルトでは黒か白であるが、その色を変更する方法を記載する。
<script> <v-text-field class="input-color-red-class" > </v-text-field> </script> <style> .input-color-red-class.v-text-field >>> input { color: red !important; } </style>
実行結果
はじめに
Vuetifyのv-text-fieldの入力文字の色は通常、黒か白です。
v-text-fieldのAPIを見ますと色に関するタグがありますが、入力文字の色を変更することはできません。
background-colorはバックグラウンドの色を変更します。
<v-text-field background-color="grey" ></v-text-field>
colorは入力時にプレフィックスなどの色を変更します。
<v-text-field prefix="PREFIX" prepend-icon="mdi-plus" color="yellow" ></v-text-field>
実行結果
- 入力前
- 入力後(押下時)
解決方法
次のようにCSSのクラスを作れば、変更できます。
<script> <v-text-field class="input-color-black-class" ></v-text-field> </script> <style scoped> .input-color-red-class.v-text-field >>> input { color: red !important; } </style>
実行結果
もしも、あるファイルに対してすべてのv-text-fieldの入力文字を変更したい場合、クラスを作らず単に次のようにしてもいいです。
<style scoped> .v-text-field >>> input { color: red !important; } </style>
