<div class="container">
  <p class="element green">When you select me I will be white and have a green background color.</p>
  <p class="element gold">When you select me I will be white and have a golden background color.</p>
  <p class="element violet">When you select me I will be white and have a deep pink background color.</p>
  <p class="element shadow">I will get text shadow when I'm selected.</p>
</div>
body {
    background-color: #eee;
    color: #555;
    font-size: 1.2em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
    margin: 2em auto;
    max-width: 700px;
    padding: 1em;
    background-color: white;
}

.element {
    padding: 1em;
    margin: 1em;
    background-color: #f3f3f3;
}

p.green::-moz-selection {
    background-color: #009966;
    color: white;
}

p.green::selection {
    background-color: #009966;
    color: white;
}

p.violet::-moz-selection {
    background-color: violet;
    color: white;
}

p.violet::selection {
    background-color: violet;
    color: white;
}

p.gold::-moz-selection {
    background-color: gold;
    color: white;
}

p.gold::selection {
    background-color: gold;
    color: white;
}

p.shadow::-moz-selection {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

p.shadow::selection {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}