I am working on a new theme for a wordpress site, http://hanahanpolice.com/test/ when I hover over the items the background is gray on some. This only happens when I am on the main page (/test) any other page I do not see the gray. I can not find where this color is coming from. Can anyone help?
Look for this class:
.front-page .menu .current_page_item a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: none;
}
And remove:
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
In your style.css at line 1308 remove background from this class:
.front-page .menu .current_page_item a{
}
And btw, you can always use for problems like this FireBug for Firefox or with IE developer tools - just press F12.
Related
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;
}
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;
}
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
Is it possible to style or color the window pane background of the browser?
When scrolling beyond the edge in Chrome and Safari on Mac,
the whole page is pulled a bit down and/or sideways.
It shows a basic canvas style of texture,
is it possible to style that region (with CSS) ?
Edit: i found a (crude) way to prevent the overscrolling entirely,
but i'm looking for a way to set a color or texture, to match the overall design.
Prevent "overscrolling" of web page
probably this is not needed anymore but maybe someone else wants to do the same :D
this should put a background-color on the overscroll-area of any ios device
body:after {
content: '';
position: fixed;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
z-index: -1;
background: #000000;
}
here is the link to my gist
Unfortunately this is not possible. This is part of the application (Safari) and can not be styled with webpages.
Set the body colour body {background-color: white} should work.
More complex, if you need to change the overscroll colour, while leaving the body colour white (only tested on iOS10.3 Safari). I did the following using a 1x1 white pixel:
body {
background-color: rgba(0, 0, 0, 0.4);
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
background-size: 100% 100%;
}
FYI 1: three other things I tried that didn't work for me were: outline: 100px solid rgba(0, 0, 0, 0.4);, box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4);, and background: #FFF, rgba(0, 0, 0, 0.4);.
FYI 2: I recall that really old versions of Safari needed the colour set on the html element.
You can now do this with a meta tag:
<meta name="theme-color" content="#923941">
If you don't like webkit to highlighting links when tapping them, you can remove that effect with:
-webkit-tap-highlight-color: rgb(0, 0, 0, 0);
Actually I want this effect, but not the extra border added around the tapped element.
Is there a way to remove highlight border only?
If you are talking about that orange borders around inputs on focus, you might want to try to add outline:none; to your CSS properties.
Like so :
input { outline:none; }
a is missing
should be -webkit-tap-highlight-color: rgba(0, 0, 0, 0);