how to change cursor on all clickable elements
Hello, I dont like how nuxt ui has normal cursor on clickable elements like fo example buttons, I wish to set cursor: pointer; to every clickable element. How can I do it? Thank you.
6 Replies
Hi @Engo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources provided do not contain specific information about how to change the cursor style for clickable elements in Nuxt UI or Nuxt applications in general.
However, based on general web development practices with Nuxt, you have a few options to achieve this:
1. Global CSS: You can add a global CSS rule in your Nuxt application to target all clickable elements. Create or modify your global CSS file (typically in
assets/css/main.css or similar) and add:
2. Nuxt UI specific: If you're using Nuxt UI, you might be able to customize the theme or override component styles through the module's configuration, but the knowledge sources don't provide specific details about this.
The knowledge sources do not explicitly mention how to configure cursor styles for Nuxt UI components or provide documentation about Nuxt UI's theming system for this specific use case. For the most accurate solution, I recommend checking the official Nuxt UI documentation or the module's GitHub repository for theming and customization options.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@336155066962804738> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@Engo this is apparently a known "issue": https://github.com/nuxt/ui/issues/2332
I don't know why you downvoted the answer from @kapa.ai - bc. it's apparently the right appoach
GitHub
Buttons don't have 'cursor: pointer' attribute · Issue #2332 · nu...
Environment Operating System: Windows_NT Node Version: v20.15.0 Nuxt Version: 3.13.2 CLI Version: 3.14.0 Nitro Version: 2.9.7 Package Manager: pnpm@9.10.0 Builder: - User Config: - Runtime Modules:...
Let me check the knowledge base for you again. One moment! :books:
----------------------
The knowledge sources you provided do not contain information about Nuxt UI's cursor styling issue or the specific GitHub issue you referenced (https://github.com/nuxt/ui/issues/2332). Therefore, I cannot confirm details about this being a "known issue" or the recommended approach from the knowledge sources.
However, based on the information in the sources, a general and effective way to ensure all clickable elements (like buttons and links) have a pointer cursor in a Nuxt app is to add a global CSS rule:
This approach is standard in web development and will work regardless of the UI library, unless the library specifically overrides the cursor style.
If you are looking for a Nuxt UI-specific solution or confirmation about the GitHub issue, the knowledge sources do not provide enough information to answer that. For further details, you may want to consult the Nuxt UI documentation or the referenced GitHub issue directly.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
<@1053389864508342302> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Ok thx