Changing input background for Chrome autocomplete - css

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/

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;
}

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;
}

Webkit scrollbar CSS, always a white box in corner

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.

How do I get the submit button to display properly with correct color instead of half being black?

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

In div, how do I make the background transparent, but not the outline?

Title says it all, I want to have the background at 50% opacity and the outline non-transparent.
div
{
opacity:0.5;
Border:1px solid #000000;
background-color:#000000;
}
Any help is appreciated.
Use rgba
the a is for opacity of the background... which can be 0 through 1 , 0 is invisible, 1 is fully visible..
div {
background-color: rgba(0,0,0,.5);
border: 1px solid black;
}
setting opacity will automatically set anything related to that class, including outline and even child nodes.
You can use rgba() to make a semi-transparent background color.
like this:
background-color:#000000; //fall-back for old browsers that don't support rgba
background-color: rgba(0,0,0,0.5); //set background color. red=0, green=0, blue=0, alpha=0.5
http://css-tricks.com/rgba-browser-support/

Resources