Disable hover styles (on mobile)?
pmlk opened this issue · 3 comments
Dealing with hover
on mobile / touch devices seems to be a topic of discussion.
Problem
I'm using a button, variant "outline". After clicking the button on a mobile device, the button looks like a regular (non-outline) button. Mobile users need to tap outside the button for the button to go back to its "outline" style after clicking it.
Desired / expected behavior
After clicking an "outline" button, I'd like the button to go back to its original "outline" style.
Questions
- Is there a way to disable the hover styles on a button completely (while keeping the button clickable).
- Is there some kind of workaround to get an "outline" button to behave as desired.
I wouldn't mind if the style doesn't change on hover on desktop if it solves the problem on mobile.
Context
I tried some of the suggestions in this issue (tailwindlabs/tailwindcss#1739), but it seems that it would only work in places where I manually add classes via classNames
. However, the tailwind classes for the button's default behavior are out of my control and reach as far as I can tell.
Hi @pmlk,
Hover effects aren't really a thing on mobile. What you're seeing is called focus
(look up the hover, active, and focus css pseudo-classes to learn more).
This styling when the button is focused is a part of the daisyui design system, not a bug, and you can see it here:
https://github.com/saadeghi/daisyui/blob/c173e759cbeed70408307e8077482e8a0d8a1576/src/components/styled/button.css#L140
To answer the second part of your question, you could do something like this:
className="focus:bg-transparent focus:text-base-content"
Thank your for the quick response, @benjitrosch!
I went down a little bit of a rabbit hole. Your suggestion worked in the Chrome device emulator. Interestingly, on iPhone (Safari) focus:
does NOT work while hover:
does.
However, I found that neither work when making use of the color
prop. I also added active:
, just to be sure. Is this meant to behave this way? Is there a way around that? 😄
<div>
<!-- WORKS ONLY in chrome device emulator NOT on iPhone (Safari) -->
<Button
className="focus:bg-transparent focus:text-base-content"
variant="outline"
>
focus
</Button>
<!-- WORKS on BOTH chrome device emulator and iPhone (Safari) -->
<Button
className="hover:bg-transparent hover:text-base-content"
variant="outline"
>
hover
</Button>
<!-- WORKS on BOTH chrome device emulator and iPhone (Safari) -->
<Button
className="hover:bg-transparent hover:text-base-content focus:bg-transparent focus:text-base-content"
variant="outline"
>
hover and focus
</Button>
<!-- DOES NOT WORK on chrome device emulator and iPhone (Safari) -->
<Button
className="hover:bg-transparent hover:text-base-content focus:bg-transparent focus:text-base-content active:bg-transparent active:text-base-content"
variant="outline"
color="error"
>
hover, focus and active with color
</Button>
</div>
Hmm, that's interesting. Thanks for doing such a comprehensive look into this. I'll take a look and let you know what I find!