csstextselection Overriding The Default Text Selection Color With CSS

Different Highlight Colors

By CSS-Tricks

Highlighting text in the following paragraph is RED

Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.

Highlighting text in the following paragraph is BLUE

Highlighting text in the following paragraph is YELLOW

code goes here :

step 1 : copy and paste below code in notepad and save as colorchange.html
step 2 : open it in browser and try to select the text.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>csstextselection</title>
</head>

<body>
<p>Overriding The Default Text Selection Color With CSS</p>
<div id="page-wrap">

        <h1>Different Highlight Colors</h1>
        <p>By <a href="http://1289solutions.blogspot.in/"><strong>CSS</strong>-Tricks</a></p>

        <h2>Highlighting text in the following paragraph is <span class="re">RED</span></h2>
        <p class="red">Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p><p>

        </p><h2>Highlighting text in the following paragraph is <span class="bl">BLUE</span></h2>
        <p class="blue">Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p><p>

        </p><h2>Highlighting text in the following paragraph is <span class="ye">YELLOW</span></h2>
        <p class="yellow">Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p><p>
    </p></div>
<style type="text/css">
.re{background: #ffb7b7;}
.bl{background: #a8d1ff;}
.ye{background: #fff2a8;}
p.red::selection {
    background: #ffb7b7 !important;
}
p.red::-moz-selection {
    background: #ffb7b7 !important;
}
p.blue::selection {
    background: #a8d1ff !important;
}
p.blue::-moz-selection {
    background: #a8d1ff !important;
}
p.yellow::selection {
    background: #fff2a8 !important;
}
p.yellow::-moz-selection {
    background: #fff2a8 !important;
}
*::selection {
background: #C32A22;
}
*::-moz-selection {
background: #C32A22;
}
</style>
</body>
</html>

thanks and have fun...........

Wednesday 5 December 2012

Overriding The Default Text Selection Color With CSS

Different Highlight Colors

Highlighting text in the following paragraph is RED

Highlighting text in the following paragraph is BLUE

Highlighting text in the following paragraph is YELLOW

No comments:

Post a Comment