text highlighting solutions

by medusaman

HTML

<p>some text</p>
<br>
<p>some more text</p>
<br>
<p>some text</p>
<br>
<input>
<input id="foo" type="range">
<input id="custom1" type="range">
<input id="custom2" type="range">
<p>some more text</p>
<br>
<p>some text</p>
<br>
<p>some more text</p>

CSS

/*---------------------*\
disregard design stylez see below
\*---------------------*/
body{background:#333; color:#eaeaea; font-family:sans-serif; font-weight:bold; font-size:50px; text-transform:uppercase;}

/*---------------------*\
color selection thingz
\*---------------------*/
/* Safari and Opera Chrome */
::selection {
    background: rgba(90,255,0,0.5);
    color:#333333;
    }
/* Firefox */
::-moz-selection {
    background: rgba(75,255,0,0.5); 
    color:#333333; 
}
/*---------------------*\
shadow dom things
\*---------------------*/
input[type=range]#custom1 {
    -webkit-appearance: none;
    background-color: Red;
    width: 200px;
}
input[type=range]#custom2 {
    -webkit-appearance: none;
    background-color: blue;
    width: 555px;
}
input[type=range]#custom2::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: Green;
    opacity: 0.5;
    width: 400px;
    height: 40px;
}

JavaScript

// text highlighting solutions

//shadow dom test 
//via http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/