Chrome Autofill CSS - css

I successfully changed Chrome's input Autofill styling to transparent (however) this only works as you type into the input field.
If you select one of the autofill options to populate the field then the input color becomes an opaque white and you can't see behind it. I cant the CSS that is doing this either. 🧐
Here is a codePen if you want to take a look.
https://codepen.io/jinch/pen/wvmrGGJ?editors=1100
Is there any way to keep this field transparent (at all times)? Any suggestions appreciated.
Cheers.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 50px white inset;
transition: background-color 5000s ease-in-out 0s !important;
}
input {
background-color: #eee !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s !important;
}
Just this code should be work.

If anyone else is interested - that code above works. The issue was I think self introduced into the CSS. Removing the box-shadow style will fix the issue I was experiencing - -webkit-box-shadow: 0 0 0 50px white inset;

Related

styling the browser's autofill when we enter data into the input

As you can see in the picture, the background becomes white when the browser autofills. What I want is like the input below, so the background is transparent.
Set the following properties with a box-shadow, just like this. Your desired background color should be there, in the box shadow. Using transparent won't work, but you can try setting an alpha value for rgba
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
-webkit-box-shadow: 0 0 0 30px #0F0F0F inset !important;
}
You might have to use -moz-autofill and ms-autofill too if the autocomplete in Firefox and Internet Explorer also changes the background. Otherwise, the above code should work well
You can edit the autofill style by using :-webkit-autofill
:-webkit-autofill {
-webkit-text-fill-color: #fff;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
}

How to avoid "-internal-autofill-selected" style to be applied?

I have a login form with 2 fields, username and password. Username field is autocompleted by chrome. When I submit the form (when it is valid), this style is applied mysteriously:
input:-internal-autofill-selected {s ñ
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark-color(black, white) !important;
}
Is there a way to avoid that? The form is submitted using Ajax, so it is a little ugly if for Username field that style is applied, but for Password field it is not.
I noticed that this happen only if field is filled with an element in the chrome sugggestions list. If field is filled with a value that is not in the list, the style is not applied.
Regards
Jaime
To get rid of the undesired behavior, this trick "just works" (tm):
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
The answer is not intuitive. It's more a trick than anything else but it looks like it's the only one that works:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px yellow inset;
}
This will style a yellow background to you input. It's basically a very opaque and overwhelming inner shadow. They use the same trick in the link #ravb79 sent.
If you're ok with the default -internal-autofill-selected styling on a light theme and just want it to look nicer in a dark theme then you might just need:
input {
color-scheme: dark;
}
You can add a box-shadow to remove the blue background
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1);
I tried overwriting the style but for some reason it didn't work at all. Webkit or at least chrome just ignored that style.
When I added !important to the style webkit / chrome just flat-out removed it from the equation entirely. Nowhere to be seen in the element inspector.
Everything I tried got either ignored or removed.
Sooo, I came up with this horrible bullshit. But it works so far.
// Fix autocomplete shit
function fix_autocomplete_shit() {
setTimeout(() => {
if ($(this).is(':-internal-autofill-selected')) {
var clone = $(this).clone(true, true);
$(this).after(clone);
$(this).remove();
}
}, 10);
}
$('.form-control').on('input', fix_autocomplete_shit);
I'm using bootstrap and I want to keep validation icons in form of background-images.
Only god knows why the webkit creators thought they absolutely have to set background-image to none but if they want war they can have it.
You could just add your own CSS so the updated state matches your regular input state. Adding an extra class to your declaration together with the !important attribute should override it.
So:
input.my-input {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
input.my-input:-internal-autofill-selected {
background-color: rgb(255, 255, 255) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
I also found this btw: https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
I slightly tweaked #kostiantyn-ko's answer to only be applied to invalid inputs.
Sass:
input {
&:is(:invalid, [aria-invalid=true]) {
// your error styles
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
// hack needed to get rid of autofill styles only on invalid forms
&:is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}
}
}
CSS:
/* your error styles */
input:is(:invalid, [aria-invalid=true]) {
background-color: var(--color-background-critical-subdued);
border: 1px solid var(--color-border-critical-subdued);
}
/* hack needed to get rid of autofill styles only on invalid forms */
input:is(:invalid, [aria-invalid=true]):is(:-webkit-autofill, :-webkit-autofill:focus) {
transition: background-color 600000s 0s, color 600000s 0s;
}

Google Chrome autofill background color change?

I'm trying to get the autofill background color on my inputs changed.
The accepted answers online seem to be something along the lines of:
Removing input background colour for Chrome autocomplete?
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected,
input:-internal-autofill-previewed {
background-color: white !important;
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
This seems to work accept in one situation, which is when the fields are already auto filled.
Meaning I refresh the browser and the fields are already pre-filled with a username/password.
When I hover over or click in the input the background color changes. However when I do nothing the box-shadow as no effect and it's still set to the default user agent stylesheet.
input:-internal-autofill-selected {
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: rgb(0, 0, 0) !important;
}
I've also tried some random properties with no success.
input:-internal-autofill,
input:-internal-autofill:hover,
input:-internal-autofill:focus,
input:-internal-autofill:active,
Chrome Version 77.0.3865.90 (Official Build) (64-bit)
Can't figure out how to override this at all. It's like it's been added at the bottom of the css rules with an important so impossible to override?
Box shadow work for me try below code. You can change the shadow color as per your requirment.
input:-webkit-autofill {
background-color: transparent !important;
-webkit-box-shadow: 0 0 0 50px white inset;
}

Changing input background for Chrome autocomplete

I have a specific background that uses an image but chrome messes it up. I know there's a way to change the color but I want to actually change the background, but how?
Normally it's like this
:
But then with the autocomplete of chrome gets like this
I have this css code for it
#email-field:-webkit-autofill,
#pass-field:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
background:#fff url(../../img/site/username.png) no-repeat 12px center;
}
The background immage still won't show up. The background is white and I've tried putting the "background:#fff....." before the "-webkit-box" but still didn't work.
The html code is, in laravel:
<li>{{ Form::email('email', '', array('placeholder' => 'E-mail')) }}</li>
<li>{{ Form::password('password', array('placeholder' => 'Password')) }}</li>
So the question is, how do I override chrome's autocomplete background with that of mine?
background:#fff url(../../img/site/username.png) no-repeat 12px center
The only solution I found is to remove the icon from the background-image style and add an absolute positioned image on the left side of the input field.
This icon will be visible on the top of the autocomplete field, just configure the right z-index.
The "-webkit-box-shadow: 0 0 0px 1000px white inset;" instruction covers all the background and you can't use transparent color. This is the reason why the css image style isn't a solution.
I found a more complete style definition for the ::autofill pseudo-selector:
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border-bottom: 1px solid #ccc!important;
-webkit-text-fill-color: #707173!important;
-webkit-box-shadow: 0 0 0px 100px #fff inset!important;
transition: background-color 5000s ease-in-out 0s!important;
}
In my case I also configured the borders, they were overwrittem and hidden under the yellow autocomplete box-shadow color.
The source is https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

How can I remove a bootstrap buttons hover effect?

I've gotten an assignment to remove the hover effect of the following button:
Visit http://www.appsbayou.se, search for the text "Kontaktinformation". Above it there's a button, "Skicka" which has an ugly black hover effect. This style comes from existing css.
I'm using Chrome and even if I open up Devtools I can't nail down the style rule that does this effect.
How can I remove this black hover color or at least change it to a color of my choosing?
You will need to toggle the hover state inside the developer tools in order to view the CSS which is applied to the button on hover state. Adding this CSS to your stylesheet will fix the problem:
input[type=submit]:hover {
background-position: 0px;
}
You have these rules:
input[type=submit]:hover {
color: #fff;
background-color: #222; // Here is the black background-color
text-decoration: none;
background-position: 0 -15px; // moves the background
-webkit-transition: background-position .1s linear;
-moz-transition: background-position .1s linear;
-o-transition: background-position .1s linear;
transition: background-position .1s linear;
}
.wpcf7-submit:hover {
background-image: linear-gradient(to bottom,#fb8800,#975200) !important; // remove this?
}
Simply change the backgound-color to your choice of color. I would also suggest removing the gradient hover and the background positioning if you only wish to change a color. (And of course then the transitions doesn't make much sense either. )
Go into the HTML and you will see this line which is the button:
<input class="wpcf7-form-control wpcf7-submit" type="submit" value="Skicka">
Remove the wpcf7-submit to get rid of the orange. It changes the color of the button but it may be a solution.
Or go into the CSS file and change this attribute:
.wpcf7-submit {
background-image: linear-gradient(to bottom, #fb8800, #975200) !important;
}
The code for the orange is #fb8800
remove this from the page
.wpcf7-submit:hover{
background-image: linear-gradient(to bottom,#fb8800,#975200) !important;
}
or do a search for it... find it... then kill it!
In BS4 you also need to overwrite the button:before pseudo-selector to set opacity to zero, otherwise hover remains, so you will end up with something like:
button.greyed-out-disabled,
button.greyed-out-disabled:focus,
button.greyed-out-disabled:hover {
background-color: #E3E3E3 !important;
color: #9E9E9E !important;
outline: none;
}
button.greyed-out-disabled:before {
background: rgba(255,255,255,0) !important;
}

Resources