Text Selection

by Kyle Mitofsky

HTML

<h2>Browser Default:</h2>
<div class="dark" >Dark-Themed </div>
<div class="light">Light-Themed</div>

<h2>Custom Selection:</h2>
<div class="dark custom">Dark-Themed</div>
<div class="light custom">Light-Themed</div>











<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO question:
    <a href='http://stackoverflow.com/q/32823562/1366033'>
        style of text selected (highlighted) with a mouse
    </a>
</div>

CSS

h2 { margin-bottom: 5px; }

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

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