CSS state for iPad Pro cursor hover

Question

The new cursor on iPad Pro aims to fit buttons when hovered. Is there a state used in safari to create special hover for it ?

I would like to make a button looks like this on a website :

Right now, hover state works but the cursor dot doesn’t disappear to fit the button.

Thanks for your help !

@CuteShaun Thanks for your answer, I just tried it and it doesn’t seem to work... It would have been a solution except that it would also have affected computer users. — Pol, Apr 21 '20 at 10:08
weird, it should be work, try clear cache on your iPad. You can specify your styles only on iPads, try for this media-queries, it's for iPad & iPad mini: ` @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */} ` — CuteShaun, Apr 21 '20 at 11:19
@CuteShaun I tried on [Codepen](https://codepen.io/chriscoyier/pen/uCwfB) each states and here is the [video result](https://imgur.com/a/6WJm0yM). I think iPad Pro has larger viewport than 1024px. — Pol, Apr 21 '20 at 11:41
try this for iPad Pro: https://stackoverflow.com/questions/41978487/what-is-correct-media-query-for-ipad-pro — CuteShaun, Apr 21 '20 at 11:45
@CuteShaun nice, I did not know this was possible ! But `cursor: none;` still has no effect on iPad cursor (as shown on the video).. — Pol, Apr 21 '20 at 11:59

score 1 · Accepted Answer · answered Oct 09 '20 at 16:44

Unfortunately, Apple doesn’t let you change the iPadOS cursor appearance using the cursor property. There’s currently no way to interact with the iPadOS cursor other than reacting to :hover, :active, etc. pseudo-selectors. You can’t control the visibility or appearance of the cursor itself. It you want to simulate the iPadOS cursor hover appearance for devices other than the iPad, check out this CodePen: https://codepen.io/cezzre/pen/poJxLEM

CSS state for iPad Pro cursor hover

1 Answers1