I'm trying to override the yellow background color Chrome puts in for -webkit-autofill text elements. But even though the Inspector tool tells me Chrome is applying my own css rule, the computed style is still yellow. Here's what I mean:
Here's a codepen of the issue. Click on the input field to give it focus and then select something from the dropdown list. (Chrome uses the 'name' attribute to find matching autocomplete options so you may need to change it to something you've used before to get the autocomplete dropdown to show)
Why isn't the computed style for this element white instead of yellow?
Apparently you can't override this, and need to use a hack as a workaround:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
Related
I would like to change the default outline glow of bootstrap for any dom element. I already did it for inputs and buttons but on any other element it is still blue. So for example, I press TAB on my keyboard and it goes to next element and it glows in blue. How do I change that? I can't find it in the css. Please look at the menu items below:
When I hit TAB on my keyboard it moves to the next each time and makes it glow in blue. How do I change that color? I think there is an easier way to modify the bootstrap css, either override it or host it locally and modify it rather than having to go after each class and specify the active, focus or whatever is causing this to glow in blue. Any ideas??
The outline glow you mentioned is called outline in CSS.
You will have to change the :focus pseudo property in css to get the color you want when you press the TAB key.
*:focus{
outline: red; /* Your color */
}
*:focus is what you are looking for:
*:focus {
box-shadow: 0 0 0 .2rem red !important;
}
you could override it using !important; like i did.
Jsfiddle: jsfiddle.net/dlnkprs/MR33L/
I'm creating a different style for a Wordpress login form. I've put an icon in both username and password field. Displaying this:
But.. when you use Chrome's autofill the background turns yellow and the icons disappear:
Any idea how to solve this so the icons are still visible?
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
This will make it so the background of the inputs are white, and you can obviously change the colour to whatever you like. Unfortunately I can't find any way to make the icons appear in front of the yellow background, so the best thing I can recommend is to turn autocomplete off in each input element by adding the autocomplete="off" attribute to them.
Sorry I couldn't have been more helpful.
You can create a span element just at the left of each input box with the icon as background. With this you separate the input from the actual icon and keep the autocomplete functionality.
Demo: http://jsfiddle.net/pt8Rb/
I am playing with the Bootstrap accordion & can't seem to be able to remove the underline/border which is displayed when the heading is open.
The accordion-heading style doesn't seem to specify a border and I can't locate where it's coming from using an element inspector.
The yellow highlighted line is what I am interested in (I have no trouble overriding the other borders.
Any tips?
.accordion-inner (below the header, encapsulates the accordion content) has a border-top property specified. This is probably what you're looking to modify/remove. The following CSS snippet will remove the border you're referencing.
.accordion-inner { border-top: 0 none; }
I have been searching for an hour on how to remove a black border/shadow around the top and left sides of a select element in IE 8 and less. Everything I have come across does not work.
I am using normalize.css and setting a 1 pixel solid red border around the error state of a select element.
Can someone tell me how to remove the black from the top and left sides? I have tried all sorts of things including the filter property, absolute positioning, and a few other things but nothing works.
Here's a zoomed in screenshot of what I'm referring to:
Try setting the following in your CSS:
select {
outline: 0 !important;
}
However, styling the select element is a notoriously wonky endeavor. Selects are much like file inputs in that browsers do not respect style rules applied to them.
If you'd like a more in-depth look at how these issues can be addressed, I highly recommend you check out this previous post.
Whenever you press the tab key while on a web page, the browser puts a border around whatever element is selected. IE and Firefox just use a dotted gray line, but Chrome uses a solid yellow highlight. My problem is that Chrome also puts this border around any active field inputs - so whenever a Chrome user clicks one of my contact fields to input their info, that yellow border pops up around the text box and really messes up my color scheme.
Is there a way to override this behavior in chrome through CSS?
Use this:
input:focus, textarea:focus { outline: /* whatever you want it to be */ }
See here.