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;
}
Related
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;
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;
}
please, help me set border over CSS for tag select for media print in Opera 38.0. I need disable print its border. This setting not function:
select{border:none !important;}
Thank
Jarda
box-shadow: inset 0 0 0 5px #fff !important;
This worked for me :)
I have a map built using the ArcGIS javascript API, and everything works except some CSS I want to apply to some labels. That doesn't work in IE10+.
To apply the CSS to the labels I listen for the graphic-node-add event, and apply the CSS to the graphic node:
on(layerLabels, 'graphic-node-add', function (addedGraphicNode) {
addedGraphicNode.node.style.textShadow = "1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white";
});
This works in Chrome and Firefox, but IE doesn't like this, and the text shows up normal. And it's not just the shadow that doesn't work in IE. No CSS I apply this way works in IE.
However this, added in the style tag, does work, and shadows the text of the scale bar in all browsers including IE:
.esriScalebarLabel{
color:black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
I've tried a couple different ways to get the CSS to work on the labels in IE, including catching the graphic-draw event, rather than the graphic-node-add event, as well as style.setProperty("text-shadow",...) method, and both fail. Any ideas?
EDIT 6/4/15
Here's a fiddle showing the issue...
http://jsfiddle.net/gvgwybta/1/
The map doesn't show up quite right, but the labeling issue can still be seen. Chrome, label shadows work. IE, they don't.
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/