Support CoreUI Development
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
You can support our Open Source software development in the following ways:
- Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.
- Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
- Give us a star ⭐️ on Github.
Utility classes that change how users interact with contents of a website.
Change the way in which the content is selected when the user interacts with it.
This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
This paragraph will not be selectable when clicked by the user.
<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 default select behavior.</p> <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
CoreUI for Bootstrap provides
.pe-auto classes to prevent or add element interactions.
This link can not be clicked.
This link can be clicked (this is default behavior).
This link can not be clicked because the
pointer-events property is inherited from its parent. However, this link has a
pe-auto class and can be clicked.
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p> <p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p> <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>
.pe-none class (and the
pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with
.pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as
tabindex="-1" (to prevent them from receiving keyboard focus) and
If possible, the simpler solution is:
- For form controls, add the
- For links, remove the
hrefattribute, making it a non-interactive anchor or placeholder link.
Interaction utilities are declared in our utilities API in
scss/_utilities.scss. Learn how to use the utilities API.
"user-select": ( property: user-select, values: all auto none ), "pointer-events": ( property: pointer-events, class: pe, values: none auto, ),