Textarea::Selection and ::-Moz-Selection

CSS - set the background color of ::selection in an INPUT or TEXTAREA in webkit / chrome?

I have tested this on my Mac in Chrome 51.0.2704.103 and Safari 9.1.1(11601.6.17) and it seems this is no longer an issue. There is no need for input::selection like the OP has suggested, the code needed for this is:

::selection{
  background: #f7a494;
}

::-moz-selection{
  background: #f7a494;
}

If you are still having this issue try the following fiddle, if it works there may be something else in your code that is interfering with it.

https://jsfiddle.net/nLftpwjc/

Proof

How to change background color of selected text in a textbox?

Yes and yes.

You can use CSS pseudo class :focus

Example:

input:focus{
    border: 5px solid blue;
    background: green;
}​

Working Demo

javascript select & highlight text in 2 blocks at the same time in textarea and div

let textarea = document.querySelector('textarea');
let target = document.querySelector('#preview');
let plainLine = '\n';
let htmlLine = '<br/>';
let pressed = false;

function textToHtml(text) {
    return text.replace(new RegExp(plainLine, 'g'), htmlLine).replace(/\s\s/g, '  ').replace(/^\s/g, ' ');
}

function htmlToText(html) {
    html = html.replace(new RegExp(htmlLine, 'g'), plainLine);
    return $('<div>').html(html).text();
}

function highlight(text, from, to) {
    let mark = text.slice(from, to);
    if (mark) mark = `<mark>${mark}</mark>`;
    return text.slice(0, from) + mark + text.slice(to);
}

function showPreview() {
    let from = textarea.selectionStart;
    let to = textarea.selectionEnd;
    let content = highlight(textarea.value, from, to);
    target.innerHTML = textToHtml(content);
}

$(textarea).on({
    mousedown: () => pressed = true,
    mouseup: () => pressed = false,
    mousemove: () => pressed && showPreview(),
    click: () => showPreview(),
    blur: () => showPreview()
});

showPreview();

::-moz-selection { /* Code for Firefox */
  color: red;
  background: yellow;
}

::selection {
  color: red;
  background: yellow;
}

#preview {
    width: 410px;
    border: solid 1px #999;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea   rows="10" cols="50" onInput="showPreview();">
  product noun
Save Word
To save this word, you'll need to log in.

Log In 
prod·​uct | \ ˈprä-(ˌ)dəkt  \
Definition of product
1: the number or expression resulting from the multiplication together of two or more numbers or expressions
2a(1): something produced
especially : COMMODITY sense 1
(2): something (such as a service) that is marketed or sold as a commodity
b: something resulting from or necessarily following from a set of conditions
a product of his environment
3: the amount, quantity, or total produced
4: CONJUNCTION sense 5
</textarea>
<br/>
<hr/>
<div id="preview">
</div>

Selection is not working properly

From the [MDN][1]:

Non-standard: This feature is non-standard and is not on a standards
track. Do not use it on production sites facing the Web: it will not
work for every user. There may also be large incompatibilities between
implementations and the behavior may change in the future.

Specifications

The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. Despite this, it's implemented in some browsers, which will probably retain experimental support for it.

Right now, the ::selection CSS pseudo-element is not in any specification on the standard track.

Support

More can be found @MDN.

How to get text value of selected text from onSelect DOM event

to grab the selected text you can use textarea.selectionStart and textarea.selectionEnd as mentioned in another answer

To solve second part of the question you will need some CSS rule to highlight the selected text. please check the code snippet.

let text_selection = document.getElementById("text");
text_selection.addEventListener("select", highlightText);

function highlightText() {
  let textarea = event.target;
  let selection = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
  console.log(selection)
}

::-moz-selection {
  color: yellow;
}

::selection {
  color: yellow;
}

<textarea id="text">
Text to be highlighted
</textarea>

How to reset background color of ::selection

The solution is to use the system color highlight for the background and highlighttext for the foreground.

Colors like inherit won't work, because inherit means "use the same color as the parent element". That's not what we want!

The first example sets the selection colors to yellow on brown, to emulate the framework theme. Just to make sure changing those colors works at all.

/* colours from theme */

::-webkit-selection {

  background-color: brown; color: yellow;

}

::-moz-selection {

  background-color: brown; color: yellow;

}

::selection {

  background-color: brown; color: yellow;

}

<div>This is a div in which you can make a selection</div>