[Bug Report][3.0.0-beta.11] Outlined input box style problem

[beshoo]

Environment

Vuetify Version: 3.0.0-beta.11 Vue Version: 3.2.39 Browsers: Chrome 105.0.0.0 OS: Windows 10

Steps to reproduce

Well, it appears on my Pc and my mobile, am not sure if this style problem may appear with other users. When I use the outline input box style, with a placeholder, there is a thick line around the placeholder word.

I make a code pen example so you can see what appears on my PC.

Expected Behavior

Text box should appear with a clearly outlined border

Actual Behavior

The text box appears with a thick border around the placeholder

Reproduction Link

https://codepen.io/yazanAlhaffar/pen/WNJppbm

[yznetaX]

Yes I Have Same Problem Hope To Help https://i.imgur.com/06RFOjA.jpeg

[qxygene]

any fix?

[qxygene]

something to do with v-field__outline__notch i guess.

[ErKeLost]

You can try variant api

<v-text-field label="Outlined" placeholder="Placeholder" variant="outlined" ></v-text-field> https://next.vuetifyjs.com/en/components/text-fields/#variant

[beshoo]

You can try variant api

<v-text-field label="Outlined" placeholder="Placeholder" variant="outlined" ></v-text-field> https://next.vuetifyjs.com/en/components/text-fields/#variant

[qxygene]

Problem is here.

[beshoo]

I would like to mention that this problem may not appear on some browsers. The strange thing if I open the vuetifyjs website : https://next.vuetifyjs.com/en/components/text-fields/#variant The problem does not appear.

but when I apply the outline on my front end, it appears, as well as the codepen result

[beshoo]

It seems if we disable the "--v-theme-on-background" it fixes the problem

[beshoo]

--v-theme-on-background

how to do that?

I just disable that from the inspect window, am not sure how to do that from the code base.

[qxygene]

yes, it's fixed.

[beshoo]

yes, it fixed it.

Yes, but how to PL this? I can not find the source code for it!

[qxygene]

Just add this to your css.

.v-theme--themeLight { --v-theme-on-background: none !important; }

[johnleider]

A codepen linking to an image is not a reproduction. As far as I can tell this is not an issue in the current version.

[qxygene]

is there any proper fix for this issue?

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.

[yznetaX]

Unfortunately no It appears on some devices but not all I had to modify it using pure css

‫في الأربعاء، 5 أكتوبر 2022 في 11:53 م تمت كتابة ما يلي بواسطة ‪qxygene‬‏ <‪ @.***‬‏>:‬

something to do with v-field__outline__notch i guess.

— Reply to this email directly, view it on GitHub https://github.com/vuetifyjs/vuetify/issues/15789#issuecomment-1268963866, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMZCYKXQ77RBGTLEDJIOA73WBXTFDANCNFSM6AAAAAAQOTEUVA . You are receiving this because you commented.Message ID: @.***>