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/
Related
Thank you for taking the time to read this. I have tried every single CSS code under the sun to try change the rollover text on a woocommerce button "Continue Shopping" to white when the button is hovered (currently grey background and black text when hovered). Wordpress with Woocommerce setup.
https://www.charliecustards.co.uk/product/the-charlie-new-orleans-black-on-black-brogue-boot-in-calf-leather-suede/
To see real time simply add the shoe to the basket and you will see the "continue shopping button" on the next screen which I just can't get the rollover text correct on! Also see screenshots.
I tried everything to get hold of the button in the css and simply change it, but nothing would work. This was the last code i tried and don't understand why it won't work?!
a.button.wc-forward:hover {color: #ffffff !important;}
More annoyingly if I put a background colour change on the hover to test I have the right selection that does work and on hover the button turns red! So not sure why the background will change but the text wont?
a.button.wc-forward:hover {color: #ffffff !important;
background-color: red !important;}
So with this code the "continue shopping" button background changes to red but the text does still not change to white?
Help on this would be so appreciated, its driving me mad.I've tried every div, selector etc associated with the button and nothing will work. The code above was one of many but I think the closest due to the fact it will change the background colour on hover but not the text colour.
Thank you so much.
I can't answer specifically in the context of WooCommerce but the current CSS applying that style is:
.woocommerce-page .woocommerce-message a.button.wc-forward:hover {
color: #000000 !important;
}
So you can attempt to copy this.
There's a fairly nasty trick for increasing specificity of "identical" selectors by just duplicating a class name, so if you still find the above is getting overwritten try using
.woocommerce-page .woocommerce-message a.button.button.wc-forward:hover {
color: #000000 !important;
}
I'd recommend commenting this as it looks like a mistake to most people.
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.
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;
}
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.
I'm using Aristo's CSS3 buttons seen here. One thing I like about Facebook's buttons are the little sliver of grey between the border and background of blue button elements. To see this go to "Messages" then "New Message" .. the Send button has just a bit of grey to make it pop out. It looks like this is achieved with this bit of code:
background-position: 0px -17px;
I've put up my attempts on jsfiddle here. My goal is to avoid creating a nested element if possible. I guess I could also create an image and set that as the background, but I was hoping this would possible just with CSS. Thanks!
Perhaps you could use the outline property for the border, and then you get to use the border property for the highlight.