Usando CSS para controlar a seleção de texto

O CSS permite controlar como a seleção de texto se comporta e aparece em suas páginas. Isso pode ajudá-lo a melhorar a usabilidade em determinadas situações e adicionar um pouco de talento visual. Vamos mergulhar!

Selecionar tudo

Às vezes, é bom ter todo o texto em um elemento selecionado automaticamente quando você clica nele. Isso é particularmente útil para o texto que é copiado / colado na íntegra (trechos de código, senhas únicas, códigos promocionais etc.).

Você pode fazer isso com um CSS simples. Não é necessário JavaScript!

div {
    -webkit-user-select: all; /* for Safari */
    user-select: all;
}

Aqui está uma demonstração. Más notícias, não funciona no iOS. Boas notícias, ela é degradada normalmente, de modo que o texto ainda é selecionável.

Selecionar tudo … Depois selecione Alguns

Enquanto isso funciona como esperado, você pode notar algo irritante: é impossível selecionar algo menos que todo o trecho de código. Não seria bom se o primeiro clique selecionasse tudo, mas você ainda poderia clicar novamente e selecionar apenas uma parte? CSS pode fazer isso.

Primeiro, use tabindexpara tornar o elemento que mantém o texto focalizável. Isso fornece ao CSS uma maneira de saber quando o elemento foi clicado.

<code tabindex="0">code snippet goes here</code>

Depois vem o CSS.

code {
    -webkit-user-select: all;
    user-select: all;
}

code:focus {
    animation: select 100ms step-end forwards;
}

@keyframes select {
    to {
        user-select: text;
    }
}

A idéia é ter user-select: allo elemento inicialmente e depois mudar para o “normal” user-select: textapós o foco do elemento, para que o texto possa ser selecionado novamente livremente. A parte complicada é o momento. Faça a troca imediatamente após o foco e user-select: alldesaparecerá antes que ele tenha a chance de fazer seu trabalho. É aí que animationentra.

Sim, user-selecté animador! Mais especificamente, é discretamente animável, o que significa que não há animação interpolada gradual, mas um corte imediato de um estado para outro. Armado com esse conhecimento, podemos animationadiar a mudança no comportamento de seleção até 100ms após o foco. Perfeito.

Mais uma vez, o bit “selecionar tudo” não funciona no iOS. Enquanto isso, o Safari para desktop mantém o texto como “selecionar tudo”. Esse truque parece funcionar bem em outro lugar, no entanto.

Impedindo a seleção de texto

Você também pode usar CSS para tornar o texto em um elemento não selecionável.

label {
    -webkit-user-select: none;
    user-select: none;
}

Provavelmente, essa é uma má idéia para o texto do corpo, mas achei útil para controles que podem ser alternados rapidamente ou “clicados com raiva” nos navegadores da área de trabalho, pois clicar duas vezes faz com que o texto seja selecionado e destacado, o que pode parecer um pouco estranho as vezes.

Veja você mesmo na seguinte demonstração. Observe como a alternância à esquerda se destaca quando clicada rapidamente, enquanto a da direita não.

Essa técnica também funciona em widgets de divulgação . Botões falsos – como um <div>com um clickmanipulador – são outro candidato. Lembre-se de que <button>é preferível usar um real , não apenas para semântica e acessibilidade, mas também porque o texto em a <button>não é selecionável por padrão, evitando o problema.

Seleção seletiva de texto

O texto não selecionado pode ser misturado no texto selecionável. Os bits não selecionáveis ​​são simplesmente ignorados quando o texto é selecionado e serão omitidos quando a seleção é copiada / colada.

A demonstração abaixo usa user-select: nonenos marcadores de notas de rodapé numéricos. Portanto, quando você copia / cola, os marcadores são removidos automaticamente para você.

Infelizmente, alguns navegadores não tocam junto. O Safari (iOS e desktop) e o Android Chrome ainda copiarão os marcadores.

Estilo da seleção

Você pode estilizar as seleções de texto direcionando o ::selectionpseudoelemento. No entanto, suas opções são limitadas a 3 propriedades: color, background-colore text-shadow(não são mais definidos na especificação , mas navegadores não apoiá-los).

Aqui está um exemplo que estiliza o texto selecionado em a <p>.

p::selection {
    color: #fffaa5;
    background-color: #f38630;
    text-shadow: 2px 2px #31808c;
}

Tente selecionar algum texto na demonstração abaixo para ver o resultado. Infelizmente, o iOS é o destaque mais uma vez, mas todos os outros devem ver cores mais sofisticadas.

Miudezas

Há outra declaração,, user-select: containque deve limitar as seleções de texto dentro de um elemento, como você veria com a <textarea>. Curiosamente, o IE11 foi o último navegador a apoiá-lo. Atualmente, nenhum navegador moderno oferece suporte a ele.

Dito isto, todos os elementos editáveis ​​(como <textarea>) são tratados como se tivessem user-select: contain. E o ::beforee ::afterpseudo-elementos são unselectable, como se tivessem user-select: none. Você não pode substituir esses comportamentos.

Indo além

Este artigo é sobre CSS, mas seria negligente se não mencionasse o JavaScript relevante.