Full opaque black text selection - html

Question

Edit explaining why this isn't duplicated:As I said in the comment, it's not exactly duplicated because the answer there isn't the solution here. Here I started explaining how I got it as (1, 1, 1) and wanted it to be (0, 0, 0), while there they didn't went has far precise and got it only to (2, 2, 2). You could say the question is the same one but I think mine is better explained and I needed a good answer for the information that I provided.
By default, the background color of the text selection is blue with some opacity.
I tried to make it full black by using ::selection and testing the alpha value of rgba() but the closest I only got was rgb(1, 1, 1). Is it possible to get rgb(0, 0, 0)? Here's the code:
::selection {
background-color: rgba(0, 0, 0, 0.996093750000000055511151231257827021181583404);
color: #fff;
}
textarea {
border: 1px solid #000;
outline: 0;
resize: none;
}
<textarea autofocus onfocus="this.select()" spellcheck="false">Text.</textarea>
If I change it to 0.996093750000000055511151231257827021181583405 I get rgb(51, 51, 51) for some strange reason. Where do these randoms numbers come from anyway? I'm using Google Chrome.

Answer 1

[..] I get rgb(51, 51, 51) for some strange reason.[..]
A little trivia:
This pseudo-element ::selection was in the drafts of CSS Selectors Level 3, but was removed during the Candidate Recommendation phase.
See here: https://www.w3.org/TR/selectors/#selection
However, it was added again in Pseudo-Elements Level 4.
See here: https://drafts.csswg.org/css-pseudo-4/#highlight-selectors
I tried to dig up the old refs, like this one: https://www.w3.org/TR/2001/CR-css3-selectors-20011113/#UIfragments; but I couldn't find the problem you are facing.
Reason:
I draw upon the Level-4 specs, which says this:
For non-replaced content, the UA must honor the color and
background-color (including their alpha channels) as specified.
However, for replaced content, the UA should create a semi-transparent
wash to coat the content so that it can show through the selection.
This wash should be of the specified background-color if that is not
transparent, else of the specified color; however the UA may adjust
the alpha channel if it is opaque
So, what you are seeing is actually the wash that is being implemented by the UA.
That explains the behaviour on replaced content like that of textareas and inputs. However, although the specs say that for non-replaced content, the UA must honor the colors (with alpha channels); it seems the browsers have not yet completely implemented the spec (i.e. level-4 so to speak). They anyway aren't bound to. Heck they haven't agreed on complete level-3 compliance.
And, ::selection is anyway deprecated in level-3! So, this is the closest to the reason you can get. Live with it.

Answer 2

I found the formula/reason to why it's impossible the way I'm trying.
That "random number" is 1 - (1 / 256) which in another words means, it doesn't let me have opaque, it has to have the minimum of opacity that does change the original color without it, which makes the rgb(1, 1, 1) never get to rgb(0, 0, 0) no matter how many decimal numbers I find.
So unless there's another technique of changing the color of the text selection that I'm not aware of, it's impossible to obtain full actuall opaque black, only black with the minimum opacity/transparency which nobody can see the diference at human eye but still, it will always be rgba(1, 1, 1). :c
The other advanced, complex and unecessary way is to use hacks/tricks/workarounds with a lot of fake visual effects and probably JavaScript which is totally not worth the ammount of work.
Resuming: Alpha with the value 1 is opaque, all the values between 1 and 1 - (1/256) still are too but I can't use those values as it apparently doesn't allow me to use opaque so I can only use between 0 and 1 - (1/256). I'm not sure which if the exact result of 1 - (1/256) is opaque or not.
So the best way is to use background-color: rgba(0, 0, 0, calc(1 - 1 / 256));.

Answer 3

Provide the color codes in Hex format.
So, your ::selection becomes:
::selection {
background-color: #000;
color: #fff;
}