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;
}
Related
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;
}
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;
}
Is there any way to avoid the default white box that appears on a custom styled webkit scroll bar?
The white box only appears when overflow is going both horizontally and vertically. (Using Google Chrome)
Edit: I have tried setting body background to a different colour - still only seeing a white box.
Screenshot:
CSS:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(0,0,0,0.35);
}
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
This is a little out of date, but in chrome, you can set background colour to rgba(0,0,0,0). Anything with alpha 0 and the box won't show :)!
::-webkit-scrollbar-corner {
background: rgba(0,0,0,0);
}
As E.C.Pabon mentioned, you can use the
::-webkit-scrollbar-corner {background-color: red;}
tag, setting the background-color to transparent worked for me.
::-webkit-scrollbar-corner {background-color: transparent;}
if you only need the vertical scrollbar you can use
overflow-y: scroll;
the white is the space between the x-scrollbar and the y-scrollbar
i hope it solve your problem
No, there is no way to avoid the white box.
You can set the background-color of it (as you did making it grayish-white in:
::-webkit-scrollbar-corner {
background: #0c0c0c;
}
We deal here with pseudo elements and the color under the ::-webkit-scrollbar-corner is white. So to get the custom webkit scrollbar blend in with your lay-out, you always have to take care of the corner's color AND keep in mind that transparency is over the white color.
While the answer provided by E.C.Pabon was technically correct, the real error was Chrome 50 on x64 Linux had a bug with GTK integration. As of Chrome 51, the issue has been fixed.
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/
The page with the problem is located at http://blue123a.businesscatalyst.com/select. The theme is called Forceful.
I made a new site and created a new form. When I added the form into the page, there was a problem with the submit button. One of the only things I found that may be relevant is to move the button up on the z-axis (I believe), but I don't know how to do that either.
The button works properly, but it is not displaying correctly.
Thanks.
Update 10/23/2014 Steve88 partially answered my initial question. The css change did make one color show left to right, shows white instead of aqua, on the submit button; it also got rid of the black half of the button. It gave me a transparent gray box on part of the button and made the button square though.
I did more digging and found answers at www.htmlgoodies.com/beyond/css/article.php/3891201 and www.w3schools.com/css/css3_borders.asp that helped me get back the rounded corners.
Adding CSS code for border-radius gave me the corners I wanted. Included -moz-border-radius and -webkit-border-radius for additional crossbrowser compatability.
I also got the button hover to work correctly.
...Original CSS...
FOR BUTTON (There is more code, but this is the essential part.)
.webform .cat_button {
background: url("../images/buttons/submit_button.png") no-repeat scroll 100% 0 rgba
(0, 0, 0, 0);
border: 0 none;
FOR BUTTON HOVER
.webform .cat_button:hover {
background: url(../images/buttons/submit_button.png) no-repeat 100% -39px; }
....CSS With Adjustments...
FOR BUTTON
.webform .cat_button {
background: url("../images/buttons/submit_button.png") no-repeat scroll 0 0
transparent;
border: 0 none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
FOR BUTTON HOVER
.webform .cat_button:hover {
background: url(../images/buttons/submit_button.png) 0 -39px; }
change your background style to this:
background: url("../images/buttons/submit_button.png") repeat 50% 0 rgba(0, 0, 0, 0);
its on line 1614 in style.css