0

I couldn't find any code examples about this. What I want to do is change the blue colour in the highlight to the orange/red.

image

This is my code for the text selection colours:

::selection {
  background: #CF5C3F; /* WebKit/Blink Browsers */
  color: #fff;
}
::-moz-selection {
  background: #CF5C3F; /* Gecko Browsers */
  color: #fff;
}
aliazik
  • 195
  • 1
  • 5
  • 13
  • Had you seen: http://stackoverflow.com/questions/2258647/changing-the-highlight-color-when-selecting-text-in-an-html-text-input and http://css-tricks.com/overriding-the-default-text-selection-color-with-css/ ?? – Vedant Terkar Nov 08 '14 at 17:48

2 Answers2

0

looks like it may be a margin problem?

try adding a negative margin-bottom to the ::selection rule and see if it works

so: margin-bottom: -10px;

If you want to make sure it is a margin problem, open up dev tools in your browser and click the magnifying glass and hover over that area to see what it is exactly.

Hau5tastic
  • 1
  • 1
0

Yup! It is definitely a margin problem. There's a bit of a margin underneath the block that says Example Here multiple times.

If you are trying to implement such a thing that, if you highlight any portion of the web page and its selection changes to this color, then maybe you should do something like this:

*::selection {
  background: #CF5C3F; /* WebKit/Blink Browsers */
  color: #fff;
}
*::-moz-selection {
background: #CF5C3F; /* Gecko Browsers */
color: #fff;
}

The * will basically select all the HTML tags, and apply that property.

ShivamMax
  • 75
  • 9