CSS Quickie: user-select

A large amount of content on the web is copied from its source by end-users for pasting elsewhere all the time. As such, there are probably times where you’ll want to specify how that copying is done. To accomplish this with CSS, we have user-select.

This is a cool property to use because it allows you to define, to some degree, how text is able to be selected. Let’s look at some code!

.Element {
  width: 200px;
  height: 200px;
  color: #000000;
  line-height: 1.4rem;
}

.Element--auto {
  /* Let's the browser defaults control user selection */
  user-select: auto;
}

.Element--none {
  /* Disallows user selection of text */
  user-select: none;
}

.Element--text {
  /* Allows text to be selected */
  user-select: text;
}

.Element--all {
  /* Allows entire text selection for one click */
  user-select: all;
}