Stop chrome from auto styling input type=search
You could try:
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
Does it help?
How to remove default chrome style for select Input?
-webkit-appearance: none;
and add your own style
Stop Google chrome auto fill the input
Are you explicitly setting the values as blank? For example:
<input type="text" name="textfield" value="">
That should stop browsers putting data in where it shouldn't. Alternatively, you can add the autocomplete attribute to the form tag:
<form autocomplete="off" ...></form>
Is there a way to disable chrome autofill option for angular form fields
The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.
In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.
One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />
. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.
My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Related Topics
Can Grid-Row-Gap/Grip-Column-Gap Be Overridden for a Single Gutter
What Does an * (Star) Mean in Front of a CSS Declaration
How to Set Multiple CSS Style Properties in Typescript for an Element
A Wide Div with Unlimited Width
Vertically & Horizontally Align Text After CSS Rotation
Display Twitter Bootstrap Btn-Group Inline with Text
How to Get a SASS Nested Nested Media Query to Work with the Use of the Media Query or Operator
Change Color in Shinydashboard
How to Figure Out Proper Min-Width and Max-Width Values for Responsive CSS
Css, Changing Hover Effect of Icon Font in a Link
Css3 :Not() Selector to Test Parent's Class
Make Div 100% of Grandparent Container
Using SCSS as Default Style Sheet in Angular 6+ (Styleext)
Safari: Vh Units Applied to Parent Element Doesn't Allow 100% Height in Child