Removing input background colour for Chrome autocomplete?
You can change input box styles as well as text styles inside input
box:
Here you can use any color e.g. white
, #DDD
, rgba(102, 163, 177, 0.45)
.
But transparent
won't work here.
/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
Additionally, you can use this to change the text color:
/*Change text in autofill textbox*/
input:-webkit-autofill{
-webkit-text-fill-color: yellow !important;
}
Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.
Strange outline appears in Chrome 83/IE on my Windows 10
it's a new "feature" of chrome 83....(that afflict all S.O.) I hope will be removed soon.
https://support.google.com/chrome/thread/48974735?hl=en
Related Topics
Oocss Separation of Container and Content
Android Webview Border-Radius Aliasing
Horizontal Centered Menu in CSS
Set Font Size of Angular Material Tooltip
Set Dot Color of 'Text-Overflow: Ellipsis'
How to Make Text Take Full Width of It's Container
CSS Transform Scale, Don't Scale Child Element
H1 Tag and P Tag on the Same Line
How to Change the Color of the Scrollbar for Microsoft Edge
How Do Ligature Icons Work in Material Icons
Chrome 83: Change Colors of New Form Styling
CSS Positioning to Fill Container: Width VS. Left/Right
Height: 100% Inside Min-Height: 100%
Does Anyone Know How Pinterest.Com's Layout Works
Css2 Attribute Selectors with Regex
How to Combine Cursor: Not-Allowed and Pointer-Events: None;