0

We're using outlined textfields from Material Design.

On some occasions, chrome(or any other browser I guess) can auto fill the data because the users has saved them. Chrome gives a hint to the user by setting the background color of the textfield to a light blue.

enter image description here

I find the part where the blue background crosses the label quite hard to read and very awkward.

I don't want to force background color to white because I think overriding default browser behaviour is a bad practice that would not serve our users.

Couldn't find any reference to that on MD docs.

Tried to force background color to white and label+outline to the "autofilled" color but I'm not sure users would take the hint.

Do you guys have any suggestions?

Improve this question
4
  • 4
    ...I think overriding default browser behaviour is a bad practice... - you're using Material Design, which overrides just about everything about the default browser does. I think you change the background color. :)
    – Nicholas Pappas
    Apr 19, 2019 at 15:29
  • Hi Florian, thanks for your question, but I'm not really seeing an issue here. You're saying that it's hard to read and very awkward, but material design has gone through rigorous testing (both in dev and design) to get to where it is. Have your users reacted a certain way? What information do you have that states that the default behavior with MD isn't what your users are looking for?
    – UXerUIer
    Apr 22, 2019 at 11:57
  • @Majo0od I actually think it's about my implementation more than MD. MD just doesn't seem to have any recommendation for auto-fill styled inputs. I feel something is awkward, and the fact that it's not into MD recommendations makes me think that I did something wrong or missed something important.
    – Florian F.
    Apr 22, 2019 at 15:04
  • If you don't prefer changing the background colour of the text field, would you rather check if the text field is auto-filled and update the hint text under the text field with some value like this field has been auto-populated?
    – ikartik90
    May 22, 2019 at 20:13

1 Answer 1

Reset to default
1

That's an interesting problem.

To solve this you could add a white background to the text so that the effect would be as follows:

  • Top Row: Enabled State
  • Bottom Row: Focused State
  • Active State would remove the blue background.

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.