CSS ::selection, ::placeholder and ::marker

Three smaller pseudo-elements that add polish.

::selection: selected text

When someone highlights text with the mouse, the browser draws a selection color. You can change it.

1
2
3
4
5
6

<style>
  ::selection { background: #d94a00; color: #fff; }
  .alt::selection { background: #1a5276; color: #fff; }
</style>
<p>Select this text with your mouse to see an orange highlight.</p>
<p class="alt">Select this one for a blue highlight.</p>

Only a few properties are allowed: color, background-color, text-decoration and text-shadow. Keep enough contrast between the text and highlight colors.

::placeholder: hint text in fields

1
2
3
4
5

<style>
  input { padding: 8px; border: 1px solid #ccc; border-radius: 6px; width: 220px; }
  input::placeholder { color: #767676; font-style: italic; }
</style>
<input placeholder="Your email address">

Placeholders have a built-in light grey that often fails contrast checks. Make sure yours stays at least #767676 on a white background. And remember a placeholder is not a replacement for a <label>: it disappears as soon as someone types.

::marker: bullets and numbers

1
2
3
4

<style>
  li::marker { color: #d94a00; font-weight: bold; }
</style>
<ol><li>Preheat the oven</li><li>Mix the batter</li></ol>

You saw this in Custom Lists. It lets you color and size the marker without removing it.