How to recreate "highlight" selection with Javascript mouse events and CSS?

Question

I wish to recreate the ability to highlight text.

Highlight the above sentence. You see that blue color that engulfs the selected text? The one letting you know that that is the text you have selected, down to the character; I want to recreate that as well as change it's color.

How could you recreate highlight - maybe not exactly - with the mouse events provided in the language? Some combination of mousedown, mousemove, mouseup and etcetera?

How is selection defined? Is it positional, where the mousedown creates a point of origin, the mouseup creates an end, and the difference is the selection? If so, then how do you access that grid information?

I don't really know where to start or the lingo that could give me any sort of useful search result. What I aim to do is somehow tie the highlighting functionality to a keyboard button, which is why I wish to recreate it's functionality.

Any help would be greatly appreciated!

Answer 1

You can change the color of the selection with this css code:

::selection {
    background: #ffb7b7; /* Safari */
}

::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

(Example is here)

For the other things, look at Teemus comment (MDN)