Hiding the Cursor in TideSDK

Question

I'm attempting to work out why some CSS3 cursor options work and some do not in TideSDK desktop applications. Presently, I've determined the following cursor options work:

• auto
• default
• help
• pointer
• progress
• wait
• crosshair
• text
• vertical-text¹
• move
• no-drop
• not-allowed
• all-scroll
• col-resize²
• row-resize²
• other resize cursors
• -webkit-zoom-in

• -webkit-zoom-out

  1. Does not alias properly (displays black on black)
  2. Displays incorrectly (as ns-resize or ew-resize)

The following, however, simply revert to auto or default, depending on the case:

• none
• context-menu¹
• cell
• alias
• copy
• custom url() cursors
• -webkit-zoom-grab

• -webkit-zoom-grabbing

  1. Forgivable, as it is not supported by Webkit

This is quite disturbing for me, as one of the cases I had in mind for my application would require me to hide the cursor. Custom cursors would also be useful for this purpose, as I could set a transparent image as the cursor. However, neither seem to be able to be used.

Does anyone have explanation of why a seemingly arbitrary selection of cursors are not supported, or how I might hide the cursor?

Thanks!

Answer 1

I'm not sure why only a subset of options is available. I would blame the outdated webkit version, but it doesn't really explain, fully.

Hiding the cursor via transparent image (1x1 transparent .png), as you mentioned, seemed to work just fine using the following:

* {
    cursor: url(image.png), auto;
}

You would probably want to target something more specifically (maybe?). I used the star selector just for demo purpose :)