CSS-WORKSHOP.COM

Download component or Go back to article

All selections styling

::-moz-selection {
    background: #000;
    color: #FFF;
}
::selection{
    background: #000;
    color:#fffl
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque urna diam, tempus lacinia dui porttitor, varius pretium tortor. Fusce ultricies fringilla tortor vitae facilisis. Nam ac risus vel eros rutrum tempor ut vitae nisl. Nam mollis neque semper eleifend porttitor. Pellentesque nec vulputate justo. Sed rhoncus, leo sit amet congue pretium, enim augue consectetur erat, sit amet pellentesque odio felis in enim. Fusce placerat, nulla sollicitudin euismod finibus, lacus odio tempus turpis, vel maximus risus ante quis magna. Suspendisse vulputate nulla eget nibh viverra, a cursus eros pellentesque. Morbi rhoncus tempus odio vitae varius. Quisque rhoncus tristique purus a bibendum. Nam pulvinar lacus mauris, et bibendum arcu accumsan sit amet. Cras mollis purus nec finibus venenatis. Sed vel lobortis augue.

Only paragraph selection styling

p::-moz-selection {
    background: #000;
    color: #F00;
}
p::selection{
    background: #000;
    color:#F00;
}

Cras rhoncus felis sed erat imperdiet, sit amet malesuada nunc pulvinar. Maecenas vulputate neque a tincidunt hendrerit. Suspendisse ullamcorper, sem vitae scelerisque maximus, nunc elit congue augue, non ultrices sem lorem at metus. Cras luctus nisl quis odio aliquam, non luctus mi mattis. Cras in lectus posuere, fringilla nisi vitae, auctor est. Nam vel consectetur mi. Mauris egestas suscipit lorem vel ornare. Proin ac est lacinia neque tempor gravida. Donec vitae dignissim nisi, eget malesuada justo. Vestibulum et lacus id nulla efficitur aliquet vel vitae turpis. Pellentesque in lectus purus. Suspendisse sollicitudin nisi at lectus lacinia, in sodales neque semper.

Selection styling with text-shadow [on IE doesn't work]

p.extra-styling::-moz-selection {
    background: #0DDB00 none repeat scroll 0% 0%;
    text-shadow: 1px 1px 1px #000;
    color: #F9F487;
}
p.extra-styling::selection{
    background: #0DDB00 none repeat scroll 0% 0%;
    text-shadow: 1px 1px 1px #000;
    color: #F9F487;
}

Curabitur vel malesuada diam. Pellentesque fermentum, neque sed ultrices euismod, lorem leo mattis neque, eleifend rutrum purus arcu in eros. Morbi pharetra, justo sit amet venenatis ullamcorper, mauris libero ornare ex, in tincidunt purus orci a felis. Nulla ac porttitor nulla. Vivamus rutrum eu justo sed tincidunt. Nulla facilisi. Praesent venenatis risus at tortor sodales, nec imperdiet purus sodales. Praesent dapibus nisl ante, vitae tincidunt erat bibendum bibendum.

Selection styling without background

p.no-background::-moz-selection {
    background: none;
    text-shadow: 1px 1px 1px #000;
    color: #F98787;
}
p.no-background::selection{
    background: none;
    text-shadow: 1px 1px 1px #000;
    color: #F98787;
}