Como fazer para impedir que um texto seja selecionado pelo usuário utilizando uma regra no CSS?
Para impedir que um usuário selecione um texto, podemos fazê-lo da seguinte maneira com o código abaixo:
.naoSelecionavel {
-webkit-touch-callout: none; /* iPhone OS, Safari */
-webkit-user-select: none; /* Chrome, Safari 3 */
-khtml-user-select: none; /* Safari 2 */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */
user-select: none; /* Possível implementação no futuro */
/* cursor: default; */
}
<p>Texto selecionável</p>
<p class="naoSelecionavel" unselectable="on">Texto <b>não</b> selecionável</p>
O atributo unselectable="on"
no HTML serve para apontar para o Opera, IE9 e versões anteriores
Referências: user-select, -webkit-touch-callout, Safari documentation, unselectable attribute