CSS color not working on link - html

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

Related

Remove blue background in select dropdown IE9

I am using IE9 and can't remove the blue background when a select dropdown is focused. When an item is selected from any of the drop downs the element is overlaid with a blue box. It doesn’t occur on Chrome or Firefox.
This code removes it for IE10 and Edge
select::-ms-value {
background: none; /* remove blue background on ie10/ie11 when selected*/
color:#5a5a5a;
}

I had the same problem and I resolved it using this:
select:focus::-ms-value {
background-color: white;
color:#000;
}
I hope this helps.

Firefox grey box on when clicking links

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;
}

-webkit-tap-highlight-color is not working

I am trying to remove tap highlight color. But it is not working mobile. When i am trying to see using inspect element on pc it is also not showing.
My css is
button, button:hover, li:hover, a:hover , li , a , *:hover, *
{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
is there any error on my css..

use both:
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
OR
* {
-webkit-touch-callout:none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust:none; /* prevent webkit from resizing text to fit */
-webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
-webkit-user-select:none; /* prevent copy paste, to allow, change 'none' to 'text' */
}

I thought I'd add to the accepted answer...
Using cursor: pointer will also cause the tap highlight to persist (even after setting -webkit-tap-highlight-color). Make sure to remove it on the element or parent it's inheriting from.

adding -webkit-user-select: none; helps at times!!

My divs appeared to get highlighted, even though I used the necessary CSS tags to remove the highlight color. This only happened in Android WebView API 26.
After a lot of tinkering, it turned out that this had nothing to do with the highlight color. The div's transparent background color was briefly rendered fully opaque as it started a transition. To fix this, I simply replaced this transparent color:
div.style.background = "rgba(0, 0, 255, .05)";
... with a similar opaque color:
div.style.background = "rgba(246, 246, 255, 1)";

I injected this code into a <style> tag on <header> on a Muse website and worked perfectly for me:
* {
-webkit-touch-callout:none;
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-user-select:none;
}

Opacity hover effect not working correct in IE

I have this simple hover effect http://www.mysecretathens.gr/Sera/index.html
#footer ul li:hover {
opacity: 0.7;
filter: alpha(opacity=40);
}
in the social media icons down in the footer, but in IE I see a blue-border all around each of the icons. How to fix that? Do you also see this?

I don't see it, but I suppose they are <a> anchor tags. So for IE you would have to add border:0px; for the anchor tags which are your social media icons.

If you have a link around an image IE automatically puts a border around it.
To remove blue border Add a { border: 0 } in your CSS

Add this to your css:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
Edit: add it before filter: alpha(opacity=40);

if you have an link (anchor), it is the standard of internet explorer. in this case you have to reset the border with:
a {
border :none;
}
or
a {
border :0px;
}
and for the next time, i recommend you jsfiddle where you can put easily your code to run and debug it on the site for questions here.

Ugly ::selection two-color background

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.