style of text selected (highlighted) with a mouse in Bootstrap 3

I'm trying use a Bootstrap 3 template and change how highlighted text looks.

By Default, when you select a word with a mouse, it is blue with a white background. I wanted to change only the blue color to sort of red, but when I use the following css, it overwrites whole styling:

<!-- language: lang-css -->

::-moz-selection { /* Code for Firefox */
    color: rgba(217,83,79,0.50);
 }

 ::selection {
    color: rgba(217,83,79,0.50);
 }

Here's an example:

I've searched CSS files of bootstrap and the template but I can't find any styling. I was searching for ::selection. How can I find it?

You should specify both the color and the background of the selected text.

Warning: Browser implementation of ::selection is not standardized and the spec for css 4 is not yet approved. That said, according to caniuse ::selection, browser support looks pretty good.

Here's an example of the code below as run in several browsers. Notice that FF and IE by default will theme selections based on the background color to make them more noticeable, while chrome will not. Chrome will also prevent any truly white selection background against a dark themed background.

Here's a Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

.dark  { color: #fff; background-color: #333;}
.light { color: #333; background-color: #fff;}

::-moz-selection { color: #D9534F;  background: #fff; }
::selection      { color: #D9534F;  background: #fff; } 

<!-- language: lang-html -->

<div class="dark" >Dark-Themed </div>
<div class="light">Light-Themed</div>

<!-- end snippet -->

Here's a Demo in jsFiddle

For more info, read up on MDN on the ::selection psuedo-element or on this article on CSS-Tricks