Seleção do usuário - CSS-Tricks

A user-selectpropriedade em CSS controla como o texto em um elemento pode ser selecionado. Por exemplo, ele pode ser usado para tornar o texto não selecionável.

.row-of-icons ( -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ )

Isso é útil em situações em que você deseja fornecer uma experiência de copiar e colar mais fácil / limpa para os usuários (não permitir que eles selecionem acidentalmente coisas inúteis, como ícones ou imagens). No entanto, é um pouco bugado. O Firefox reforça o fato de que nenhum texto correspondente a esse seletor pode ser copiado. O WebKit ainda permite que o texto seja copiado se você selecionar elementos ao seu redor.

Você também pode usar isso para garantir que um elemento inteiro receba seleção:

.force-select ( -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ -ms-user-select: all; /* No support yet */ user-select: all; /* Likely future */ )

Aqui estão algumas demonstrações desses:

Veja o demo selecionado pelo usuário da caneta por Chris Coyier (@chriscoyier) no CodePen.

Não houve especificações para esta propriedade por um bom tempo, mas agora é abordada no Módulo de interface do usuário básico CSS nível 4.

O valor padrão é auto, o que faz a seleção acontecer normalmente conforme o esperado. “Normalmente” é um pouco complicado. Vale a pena citar as especificações aqui:

Nos pseudo elementos :: before e :: after, o valor calculado é none

Se o elemento for um elemento editável , o valor calculado écontain

Caso contrário, se o valor calculado da seleção do usuário no pai deste elemento for all, o valor calculado seráall

Caso contrário, se o valor calculado da seleção do usuário no pai deste elemento for none, o valor calculado seránone

Caso contrário, o valor calculado é text

Em outras palavras, ele entra em cascata de maneira inteligente e retorna a um estado sensorial. Parece que talvez esse recurso pudesse ser usado para tornar pseudo-elementos selecionáveis, mas nenhuma palavra final ainda.

Mais antigo / proprietário

O Firefox suporta -moz-none, o que é como nenhum, exceto que significa que subelementos podem substituir a cascata e se tornar selecionáveis novamente com o -moz-user-select: text;Firefox 21, nenhum se comporta como -moz-none.

O Internet Explorer também oferece suporte a um valor proprietário até agora element, no qual você pode selecionar o texto dentro do elemento, mas a seleção irá parar nos limites desse elemento.

Mais Informações

MDN Docs
Interoperabilidade de seleção do usuário

Suporte para navegador

Isso é especificamente para -*-user-select: none;

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.