'How to change the background color from selected text

How can I change the background color from selected text? Like selecting this question but instead of a blue background and white text, a white background and red, blue, white etc. text.
Thanks, VVW

htmlcssbackgroundselection


Solution 1:[1]

You can use ::selection CSS to achieve this. Eg:

::selection {
  background:#fff;
  color:red;
}

Solution 2:[2]

In CSS3, you can use the ::selection declaration.

::selection { background: #00FF00; }

Solution 3:[3]

There are many ways, but the easiest all use CSS. Read up on CSS background-color and CSS3 hover.

Solution 4:[4]

html,body{
  background-color: #fff;
}
h1,p{
  color: #000;
}
::selection{
  background-color: #000;
  color: #fff;
}
<html>
<head>
<title> Trial </title>
</head>
<body>
  <h1> This is the trial header</h1>
  <p> This is the trial paragraph </p>

</body>
</html>

Solution 5:[5]

It can be done with the::selection CSS pseudo-element. for example:

p::selection {
 background:red;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kohane15
Solution 2 Rebecca Chernoff
Solution 3 Pete Wilson
Solution 4 Shedrack
Solution 5 Murad

Related Questions