Opacity in ::selection

HTML & CSS
1

Hello,
I wanted to add some customisatuon to the highlighting of a site I am developing and I learned one van do this with styling ::selection.
So, just as a test, I picked a dark colour— indigo— and added that as the background -color for ::selection or the highlight colour.
the reason I picked a darkcolour— colour is because I saw that ::selection causes lighter colors to be rendered differently that what the actual colour is. Well, at least in Chrome.

So my current syntax is:


::selection{
    background-color:indigo !important;
    color:#fff !important;
}

so I think this looks good as the white contrasts the individual, but when images and other elements that the color property does not apply to or hovered on, they are covered.

I removed the styling and saw that chrome handles this by choosing a blue for the highlight colour and giving it some opacity or transparency.

My issue However is that chrome does not say or publish how they get that ::selection or highlight to look that way.
Can someone help me give my custom highlight colour a slight or somethe transparency? Or at least teach me how to edits its opacity so that I can play with until u til I like it?.

Thank you all in advance for any and all help!

Regards,
Team 1504

2

: :selection isn’t something I’ve ever used. As far as I can see, you’re pretty restricted in how you can style it, so I think it may not be possible to do what you want here. It also looks as if browser support is pretty poor. http://reference.sitepoint.com/css/pseudoelement-selection#compatibilitysection

3

Can you show us what you’d like to do? A live demo would be great. There are definitely other ways to highlight certain elements.

4

Well sure. I dont have access to The internet except on my phone right now, but try these in chrome.


<html>
    <head>
         <title>no custom styling</title>
    </head>
    <body>
   <H1>headline </H1>
   <p>Loren iosum Loren ipsum <br /> Lorem ipsum </p>
    </body>
</html>



<html>
    <head>
         <title>custom styling</title>
        <style type="text/css">
            ::selection{
background-color:indigo !important;
color:#fff !important;
}
    </head>
    <body>
   <H1>headline </H1>
   <p>Loren iosum Loren ipsum <br /> Lorem ipsum </p>
    </body>
</html>

If you view the first one in chrome and highlight it
the the highlight colour is a light blue with some transparency. This allows for seeing text and images under the highlight.

If you view the second one in chrome and high light some of the content, The highlight colour ia full indigo. The text can be seen as it has a nice contrast since its colour is forced to be white. But when images are highlighted with that ::selection styling, they are slightly hidden.

However in the first images can be seen as well as text and it looks like there is some transparency in that default blue background colour with the default ::selection styling in chrome.

I want to be able to keep that indigo colour, but lessen the opacity of that fill some.
even if its not supported that well, I want it to look well where it is supported.

5

Try something like this:

::selection {
    background-color: rgba(75, 0, 130,.4);
    color: #f08;
}
6

You can use rgba and adjust the opacity of the colour you use.


::-moz-selection {
	background:rgba(111, 0, 255,0.6) !important;
	color:#fff !important;
}
::selection {
	background:rgba(111, 0, 255,0.6) !important;
	color:#fff !important;
}

Just adjust the 0.6 up or down to suit.

Edit:

pipped at the post :slight_smile:

7

HAHA. Wake up, sleepy head. :wink:

8

Paul: it is quite late isnt it? I was sirprised ou’re on spf, but maybe your working on a projected.

Thank you all.

Also can’t I do two background properties in case rgba isn’t supported?
Background:indigo;
Background:/Indigo rgb and decimal transparency/

Even though I think everything that supports ::selections supports rgba.

Regardless, is the syntax I put a good or proper way to provide a failsafe for lack of rgba support in css in general?

9

I wouldn’t bother because as you say anything that supports ::selection will support rgba so a fallback is a little pointless here especially as the browser has its own fallback anyway.

Regardless, is the syntax I put a good or proper way to provide a failsafe for lack of rgba support in css in general?

Yes but be careful as IE7 and under have a bug in certain circumstances. (If targeting ie7 and under then its usually safer to do so in a separate rule.)

10

ah okay. Thank you for the confirmation.

I tried to look in the csswg’s site and the w3c’s site, but i can not find an official list for the hex-code-values for the colour-keywords. For example, I wanted to find the hex-code of Indigo so that i could input that in a web-colour-pallet and find the rb value for the css keyword indigo.

The reason I am not putting the hex-code value in Illustrator or Photoshop is because i have been told that they output the wrong rgb values.

Does anyone know where i can find a list of the official hex-code for the css keyword “indigo”? Or even better an official list that has he official and proper rgb value for the css keyword “indigo”?

11

Indigo is not one of the 16 official colour keywords. You can out find more in the [URL=“http://reference.sitepoint.com/html/color-names”]Sitepoint reference.

Any online converter will convert from hex to rgb easily.

12

I cannot decide between the following colours: #4B0082 (indigo) #E6E6FA (lavender-white-colour).

I know this isn’t graphics, but what do you guys think looks better or nicer on a page with a #000 bg and #fff text-colour ?

I didn’t end up using rgba because I didn’t know how to interpret the NaN that the converter put out for indigo as a number and i think the white-ness of the second colour is good enough to see through. What do you guys think?

13

r = 75
g = 0
b = 130
Should be indigo.

14

oh. i swear it gave me NaN for one of the values. whoops. thanks.

Do you have any opinion on the indigo v.s. lavender on a black bg with white text ?

15

No, I have no opinion on design choices. Make it as ugly as you’d like. :wink:

16

lol :slight_smile:

My color choice is dubious also :slight_smile: Just make sure you have a good contrast.

17

Ah, great tool. Thanks. :slight_smile:

18

Yes its interesting tool to see what passes and what doesn’t :slight_smile:

19

ah okay. (probably the shortest reply i’ve ever done). Thanks for all the links. They really help! :slight_smile:

Thank you all!

20

I use the color picker in Photoshop or Illustrator rather than an online converter. Not that the online version isn’t correct, it’s just that I don’t need it.