v-text-fieldをカスタムするには

vuejsで名前とパスワードのログインページを作成しました。uiはvuetifyを使用しています。ページにアクセスするとautocompleteによって自動で文字が入力されます。v-text-fieldに指定したlabelの文字とautocompleteによって入力された文字が重なって表示され非常にかっこ悪いです。ページが表示された後にwindowのどこでもいいからクリックするとlabelの文字が上にあがって小さくなるため重なりは解消されます。

いろいろ調べましたがautocompleteはoffにできません。offにする方法を見つけたとしてもいずれ対応されてしまいます。

なのでこの重なりを解消するためにコードからbodyをクリックしようと思いました。しかし、Event.isTrustedによってコードからのクリックではv-text-fieldの文字の重なりを解消できないと分かりました。

後はv-text-fieldをカスタムする以外にありません。v-text-fieldのラベルの文字はv-text-fieldの中に最初大きく表示されています。クリックすると左上に移動して文字も小さくなります。これで文字の重なりは解消されるので最初からラベルが左上に小さく表示されていればいいのですがvuetifyのsampleではそのようなv-text-fieldはありませんでした。このようなカスタムはそもそもできるのでしょうか?

退会済みユーザー

2022/08/03 05:07

フォーム入力ページのurlや入力欄のidやnameが毎度同じだからautocompleteされがちなので、逆を言うと、idやnameが類推されない程度にランダムだとどうだろうか。（試してない思考実験

takahashi-one

2022/08/03 05:55

その方法は対策されたようです。それ以外の値の中にランダムの値も入ってしまうのでoffにはできないとどこかのサイトにありました。

行動規範の内容に同意します

回答1件

自己解決

こんなんで重なりを無理やり解決しました。

css
1.v-label{
2  top:-15px !important;
3  left:-12% -7.5px !important;
4  font-size:70% !important;
5}
6.v-input .v-label--active{
7  transform: translateX(0%) translateX(0px) translateY(0px) !important;
8}