How to prevent text from being selected using CSS

Navigation
5

How do I prevent a text from being selected by the user using a rule in CSS?

    
asked by anonymous 30.10.2015 / 19:38

1 answer

6

To prevent a user from selecting 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 unselectable="on" attribute in HTML serves to point to Opera, IE9 and earlier versions

  

References: user-select , -webkit-touch-callout , Safari documentation , unselectable attribute

    
30.10.2015 / 19:38
Handle and model Json object You can simplify the IF statements in PHP