Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[TextField] Chromes auto-fill covers label for outlined TextField
See original GitHub issue
- This is not a v0.x issue.
- I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
The yellow background inserted by chromes auto-fill should not cover the label.
Current Behavior
Chromes auto-fill covers the label
Steps to Reproduce
Link: https://material-ui.com/demos/text-fields/#outlined
Your Environment
| Tech | Version |
|---|---|
| Material-UI | v3.1.0 |
| React | (your react-version from documenation-code 😉 ) |
| Browser | Google Chrome 69.0.3497.92 |
possible solution
If I add z-index: 1 to the label, the problem is solved. Another option is to use the CSS-webkit-autofill-selector, but I am not sure which properties you have to change to make it fit
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:8 (8 by maintainers)
Top Results From Across the Web
[TextField] Chromes auto-fill covers label for outlined ...
I have searched the issues of this repository and believe that this is not a duplicate. Expected Behavior. The yellow background inserted by ......
Read more >How fix issue with chrome auto complete overlap ...
In this case, the label of the fields, moves out of the way only when the input field is focused, and stays away...
Read more >Material Design outlined textfields filled with auto fill ...
We're using outlined textfields from Material Design. On some occasions, chrome(or any other browser I guess) can auto fill the data because ...
Read more >autofill
The :auto-fill pseudo-class in CSS allows us to style <input> elements that contain content auto-filled by the browser.
Read more >Optimizing Material Design autofilled outlined textfields while ...
The outlined version has a little issue when it comes to autocomplete though; the autofill background color doesn't fill the whole component.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@PutziSan I’m fine with the z-index, thanks for raising the issues. With that in mind, better put the style in the
filledandoutlinedrules of the InputLabel than in theformControl.@PutziSan Thanks for raising! My bad, I have removed this logic. I think that it’s generic enough to add it in the InputBase. https://github.com/mui-org/material-ui/pull/12076/commits/abc8be8c7f46b957a97932cd91063bd6720c6853#diff-347c7dd040c46d0783e8c172e42e3dc1L47