How to change the opacity of the selected text? - css

I have almost invisible text on the webpage with opacity: 0.1;
I want it to become visible when selected.
However, the selection is also almost invisible.
Unfortunately, ::selection doesn't change the opacity.

You won't be able to use the opacity property with ::selection. It was never one of the allowed properties, and even if it were implemented, it wouldn't make sense as you're not modifying the opacity of the element itself anyway.
You can use rgba() colors with the text and background rather than opacity on the entire element instead. It's not the ideal workaround, but it works at least for colors:
body {
color: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
color: rgba(0, 0, 0, 1);
}
::selection {
color: rgba(0, 0, 0, 1);
}
<p>Almost invisible text that turns opaque on selection.

Instead of using opacity, just set the alpha in the rgba color like so...
::selection {
background: rgba(255, 255, 0, 0.5)
}

Related

Why is the rgba background value in this css block invalid?

This CSS validator says the background value in this css block is invalid:
.sticky_scroll_box2 {
background: rgba(0.95, 0, 0, 0.05);
color: rgba(0, 0, 0, 0.95);
opacity:1;
z-index: 13;
}
Why is that?
CSS validator says the background value in this css block is invalid because RGBA value can't be in decimal (besides the opacity/transparency)
RGBA only accepts integer, by using a number in floating point, CSS validator will throw an error
You need to change your css to
body {
background: rgba(1, 0, 0, 0.05);
}
RGB only accepts integer numbers (0-255), only the Alpha accepts floats (0.00 - 1.00). You are using float for the Red value.
From this:
background: rgba(0.95, 0, 0, 0.05);
To this:
background: rgba(1, 0, 0, 0.05);

css - stop inheritance of opacity

I have div with opacity:0.80; property that contain text and button. The problem is that button and text also inheritance opacity from div. How to fix it?
I already tried to add opacity:1; to button and text <p> tag, but it does not helps.
I think you want the opacity on the background instead. As Prisoner said, not supported by old browsers.
background-color: rgba(0, 0, 0, 0.8);
w3schools: RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.
you can't fixed it.Child elements also getting parent opacity
One solution is using rgba:
USE :after pseudo element
element:hover:after {
background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1
}

Using CSS3, solid black background that is 95% transparent?

Using CSS3, what RGB-like value should replace VALUE below in order to achieve a solid black background that is 95% transparent?
div { background: VALUE }
Thanks Folks!!!
RGBa (a for alpha)
div { background: rgba(0, 0, 0, .05)};
You can use an RGBA notation.
R for red, G for Green, B for Blue and the A for aplha (percentage of transparency, as you've asked).
So the best answer is :
div {
background : rgba(0, 0, 0, .95);
}
And don't worry, it's supported by all the major browsers (even IE since IE 9) : http://caniuse.com/css3-colors
RGBa, i think:
div {
background:rgba(0, 0, 0, 0.95);
}
Folks i took a challenge test online and the following is the answers they provided to my question above:
div { background:rgba(0, 0, 0, 0.05); }
To check, I ran a test on my system and #Blingue is definitely correct.
Use div {background:rgba(0,0,0,0.05)}

How to remove webkit tap highlight border only?

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

Transparent Button Flashes White on Page Load

I have a button with a transparent bg. On hover it changes to some color.
And a transition is set to smooth it out. Lets say the page visible behind it is red (anything other than white).
background-color: rgba(0, 0, 0, 0)
transition: background-color 0.5s
&:hover: {
background-color: rgba(0, 0, 0, 0.7)
}
Problem: on page load, or more precisely element load (using React), the button will go from white to transparent.
How to fix?

Resources