2020-05-11 10:57:29 -07:00
---
layout: docs
title: Interactions
2020-05-12 09:45:21 +03:00
description: Utility classes that change how users interact with the contents of a website.
2020-05-11 10:57:29 -07:00
group: utilities
---
## Text selection
2020-11-13 10:49:32 -08:00
Change how the content is selected when the user interacts with it. Note that Internet Explorer and Legacy Edge have no support for the `all` value for `user-select` , and as such, ** `.user-select-all` is not supported by either browser.**
2020-05-11 10:57:29 -07:00
2020-11-04 16:39:29 +02:00
{{< example > }}
2020-05-11 10:57:29 -07:00
< p class = "user-select-all" > This paragraph will be entirely selected when clicked by the user.< / p >
< p class = "user-select-auto" > This paragraph has the default select behavior.< / p >
< p class = "user-select-none" > This paragraph will not be selectable when clicked by the user.< / p >
2020-11-04 16:39:29 +02:00
{{< / example > }}
2020-05-11 10:57:29 -07:00
Customize the available classes by changing the `$user-selects` Sass list in `_variables.scss` .