I am unable to remove the grey box behind a link when it is clicked in Firefox.
I have tried using the code below which was recommended in a few different cases but it was unsuccessful.
a:active {
background-color: transparent !important;
}
Here is a photo of what is happening when clicking a link:
This did the trick.
a:focus{
background: none;
}
Related
Perhaps a stupid question:
Here is a screenshot of my login page with a text-input field where I set the background-color. In the developer tools the background color property shows up as red, but in the page it is still grey. Any ideas on how to change it to red?
edit: under computed it says:
edit:
this issue might be related to the chromium browser. On Chrome the background color is red
As you can see
there is -internal-autofill-selected in computed tab
These are browser's default styles
Perhaps you should do to override it
#id_username,
input#id_username:-internal-autofill-selected {
background-color: red !important;
color: #fff !important;
}
Could you try this
input:-webkit-autofill {
background-color: transparent;
}
The md-switch when toggled on the Safari browser displays a yellow section on the md-thumb section of the switch.
The toggle should just be that blue color and have no yellow. It turns yellow after toggling the switch on or off. Other browser handle this toggle switch fine. The md-bar is fine, but the `md-thumb' is what is yellow. I tried setting everything to the blue I am using...
LESS
md-switch .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}
md-switch.md-checked .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}
md-switch[disabled] .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}
HTML
<md-switch ng-model="orgAdminSwitch" class="md-primary" ng-change="orgAdminChanged(orgAdminSwitch)" ng-show="isAdmin" aria-label="Org Admin Switch" style="float: right;"></md-switch>
But this only dimmed the yellow. The yellow was still visible and this only happens in Safari when the switch is toggled on or clicked to toggle off. Any idea on how to remove this?
I found a work around for this issue. If you set display: none on the md-switch .md-thumb: before and md-switch .md-ripple-container it will stop the color glitch. You will lose the ripple when toggling the switch but there will no longer be this combination of colors. The issue itself is due to different colors coming through and combining to make this yellow color. This is an issue only on the Safari browser, but this is an easy workaround and will solve the issue on all browsers.
The code will look like:
md-switch .md-thumb: before {
display: none;
}
md-switch .md-ripple-container {
display: none;
}
When visiting the page in Incognito (removing :visited styles) the link's text is blue, but it should be white.
.button {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:visited {
color:#ffffff; /* white */
background:#d8eaf0;
}
.button:hover {
color:#ffffff; /* white */
background:#3838a5;
}
.button:active {
color:#ffffff; /* white */
background:#d8eaf0;
}
text
Where your ".button" CSS style is, change it to ".button:link".
Try setting the position to absolute. And if that still doesn't work, go onto incognito mode and go on inspect element and check to see if the text box is overlapping.
If nothing still works, use inspect elements on Google and that should give you a great headstart. Good luck :D
I'm trying to use a custom ::selection effect in Chrome but getting this bad blue coloration on highlighted text:
Here's my CSS:
::selection {
color:#ffffff;
background: #000000;
}
::-moz-selection {
color:#ffffff;
background: #000000;
}
::-webkit-selection {
color:#ffffff;
background: #000000;
}
I can't replicate the error in Firefox - is there anything I can do, or is it just a feature of the browser?
You want to wrap the text in a <p> tag.
I'm a little confused, because the selected text is applying the style from the code you're using... white text on a black background.
Is the light blue part the problem? If that's the case, I think the structure/css of the surrounding container(s) would be more helpful to get to the bottom of this.
I was able to get the navigation dropdown to show the letters in a different color from the background (white in this case) in Chrome browser. But when I view the same page in IE or FF, the whole background is just all green.
Here is an example of such a page:
http://www.comehike.com/hikes/hikes_and_groups.php
And here is the CSS code that makes the color show up white in Chrome
#navigation li li a {
color: #white;
text-decoration:none;
}
To see the difference, just mouse over the top right where it says "community" or "hikes"
Thanks,
Alex
take out the hash symbol from color: #white. "white" is a keyword, the hash signifies it's a color coded in hexadecimal, such as #fff.
#navigation li li a {
color: white;
}