Interacciones
Clases de utilidad que cambian la forma en la que los usuarios interactúan con los contenidos de un sitio web.

Selección de texto
Cambiar la forma en que se selecciona el contenido cuando el usuario interactúa con él.
Este párrafo se seleccionará por completo cuando el usuario haga clic.
Este párrafo tiene un comportamiento de selección predeterminado.
Este párrafo no se podrá seleccionar cuando el usuario haga clic en él.
<p class="user-select-all">Este párrafo se seleccionará por completo cuando el usuario haga clic.</p>
<p class="user-select-auto">Este párrafo tiene un comportamiento de selección predeterminado.</p>
<p class="user-select-none">Este párrafo no se podrá seleccionar cuando el usuario haga clic en él.</p>
Eventos de puntero
Bootstrap proporciona las clases .pe-none
y .pe-auto
para evitar o agregar interacciones de elementos.
No se puede hacer clic en este enlace.
Este enlace se puede hacer clic (este es el comportamiento predeterminado).
No se puede hacer clic en este enlace porque la propiedad pointer-events
se hereda de su padre. Sin embargo, este enlace tiene una clase pe-auto
y se puede hacer clic en él.
<p>No se puede hacer clic en <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">este enlace</a>.</p>
<p><a href="#" class="pe-auto">Este enlace</a> se puede hacer clic (este es el comportamiento predeterminado).</p>
<p class="pe-none">No se puede hacer clic en <a href="#" tabindex="-1" aria-disabled="true">este enlace</a> porque la propiedad <code>pointer-events</code> se hereda de su padre. Sin embargo, <a href="#" class="pe-auto">este enlace</a> tiene una clase <code>pe-auto</code> y se puede hacer clic en él.</p>
La clase .pe-none
(y la propiedad CSS pointer-events
que establece) solo evita las interacciones con un puntero (mouse, lápiz óptico, toque). Los enlaces y controles con .pe-none
son, de forma predeterminada, aún enfocables y procesables para los usuarios del teclado. Para asegurarse de que estén completamente neutralizados, incluso para los usuarios de teclado, es posible que debas agregar más atributos como tabindex="-1"
(para evitar que reciban el foco del teclado) y aria-disabled="true"
(para transmitir el hecho de que están efectivamente deshabilitados para las tecnologías de asistencia) y posiblemente usar JavaScript para evitar que sean accionables.
Si es posible, la solución más simple es:
- Para los controles de formulario, agrega el atributo HTML
disabled
.
- Para los enlaces, elimina el atributo
href
, convirtiéndolo en un enlace no interactivo o enlace placeholder.
Tal vez te interese
Sass
API de utilidades
Las utilidades de interacción se declaran en nuestra API de utilidades en scss/_utilities.scss
. Aprende a usar la API de utilidades.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),