Utility classes which can be used to change how users interact with contents of a website.
Text selection #
You can change the way in which the content is selected when the user interacts with it.
<!-- User select all --> <div class="user-select-all"> This text will be entirely selected when clicked </div> <!-- User select auto --> <div class="user-select-auto"> This text has the default browser select behavior </div> <!-- User select none --> <div class="user-select-none"> This text will not be selectable when clicked </div>
Pointer events #
You can also use the
.pe-auto classes to prevent or add element interactions, specifically, interactions with a pointer (mouse, stylus, touch).
<!-- Pointer events none --> <div> <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked (disabled) </div> <!-- Pointer events auto --> <div> <a href="#" class="pe-auto">This link</a> can be clicked (browser default) </div>
As stated above, the
.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.
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.