Select Content in a Div with Only CSS

Select Content in a Div with Only CSS

Here's a handy CSS trick: make text inside an element automatically select when clicked.

.selectable {
    -webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all;   /* Safari */
    -khtml-user-select: all;    /* Konqueror HTML */
    -moz-user-select: all;      /* Firefox */
    -ms-user-select: all;       /* Internet Explorer/Edge */
    user-select: all;           /* Chrome and Opera */
    border-bottom: 1px dashed chocolate;
    cursor: pointer;
    display: inline-block;
}

How It Works

Add the selectable class to any HTML element. When a user clicks on it, all the inner content is automatically highlighted. Then they can press Ctrl+C (or Cmd+C on Mac) to copy without manually dragging to select.

This works especially well on mobile devices, where selecting text can be finicky. One tap highlights everything.

The dashed border and pointer cursor provide visual feedback that the element is interactive.