How to prevent text from being selected using CSS

Asked

Viewed 5,315 times

5

How to prevent user-selected text using a CSS rule?

html css

1 answer

7


To prevent a user from selecting a text, we can do it as follows with the code below:

.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>

The attribute unselectable="on" in HTML serves to point to Opera, IE9 and earlier versions

References: user-select, -Webkit-touch-callout, Safari Documentation, unselectable attribute

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.