javascriptcsselectronelectron-builder

Change Cursor on Draggable region in Electron

I am making an app in Electron and I have a frameless window, I have some top areas to -webkit-app-region: drag but when I do this, the will not change.

obviously it will not be draggable in this snippet because it's not an electron app, but basically the cursor will not change on an element that is draggable.

EDIT: it seems that trying to change the cursor on any webkit style does not work at all as I tried to change the cursor on a scrollbar as well. Is there any fix to this? I have googled it but found nothing that fits.

#draggable {
  -webkit-app-region: drag;
  cursor: grab;
  height: 40px;
  width: 90%;
  margin: 0;
  background-color: #393939;
  color: #000;
  position: absolute;
  z-index: 2;
  top: 0;
  border-bottom: 3px solid #202020;
}
#draggable:hover {
  cursor: grab;
}
<div id="draggable">
   <h3 style="margin: 5px 0 0 10px;">Hardware Application</h3>
</div>

Solution

  • Unfortunately setting -webkit-app-region: drag; disables all click and mouse events because it's treated as a title-bar so you can't change the cursor.

    I would include where I read that but I can't find it anymore.

    See:

    #1354 -webkit-app-region: drag eats all click events

    #8730 Frameless Electron App not work css cursor:pointer