Is it possible to hide the cursor in a webpage using CSS or Javascript

Question

I want to hide the cursor when showing a webpage that is meant to display information in a building hall  It doesn t have to be interactive at all  I tried with the cursor property and a transparent cursor image but I didn t make it work   Does anybody know if this can be done  I suppose this can be thought as a security threat for a user that can t know where he is clicking on  so I m not very optimistic    Thank you

User · Answer

If you want to do it in CSS    ID   cursor  none  important

User · Answer

Pointer Lock API  While the cursor  none CSS solution is definitely a solid and easy workaround  if your actual goal is to remove the default cursor while your web application is being used  or implement your own interpretation of raw mouse movement  for FPS games  for example   you might want to consider using the Pointer Lock API instead   You can use requestPointerLock on an element to remove the cursor  and redirect all mousemove events to that element  which you may or may not handle    document body requestPointerLock      To release the lock  you can use exitPointerLock   document exitPointerLock        Additional notes  No cursor  for real  This is a very powerful API call  It not only renders your cursor invisible  but it actually removes your operating system s native cursor  You won t be able to select text  or do anything with your mouse  except listening to some mouse events in your code  until the pointer lock is released  either by using exitPointerLock or pressing ESC in some browsers    That is  you cannot leave the window with your cursor for it to show again  as there is no cursor   Restrictions  As mentioned above  this is a very powerful API call  and is thus only allowed to be made in response to some direct user-interaction on the web  such as a click  for example   document addEventListener  click   function          document body requestPointerLock          Also  requestPointerLock won t work from a sandboxed iframe unless the allow-pointer-lock permission is set   User-notifications  Some browsers will prompt the user for a confirmation before the lock is engaged  some will simply display a message  This means pointer lock might not activate right away after the call  However  the actual activation of pointer locking can be listened to by listening to the pointerchange event on the element on which requestPointerLock was called   document body addEventListener  pointerlockchange   function          if  document pointerLockElement     document body               Pointer is now locked to  lt body gt               Most browsers will only display the message once  but Firefox will occasionally spam the message on every single call  AFAIK  this can only be worked around by user-settings  see Disable pointer-lock notification in Firefox   Listening to raw mouse movement  The Pointer Lock API not only removes the mouse  but instead redirects raw mouse movement data to the element requestPointerLock was called on  This can be listened to simply by using the mousemove event  then accessing the movementX and movementY properties on the event object   document body addEventListener  mousemove   function  e        console log  Moved by     e movementX          e movementY

User · Answer

If you want to hide the cursor in the entire webpage  using body will not work unless it covers the entire visible page  which is not always the case  To make sure the cursor is hidden everywhere in the page  use   document documentElement style cursor    none     To reenable it   document documentElement style cursor    auto     The analogue with static CSS notation is in the answer by Pavel Salaquarda  in essence  html    cursor none

User · Answer

I did it with transparent   cur 1px to 1px  but it looks like small dot     I think it s the best cross-browser thing that I can do  CSS2 1 has no value  none  for  cursor  property - it was added in CSS3  Thats why it s workable not everywhere

User · Answer

With CSS   selector   cursor  none      An example    x000D   x000D   lt div class  nocursor  gt  x000D     Some stuff x000D   lt  div gt  x000D   lt style type  text css  gt  x000D       nocursor   cursor none    x000D   lt  style gt  x000D   x000D   x000D    To set this on an element in Javascript  you can use the style property    lt div id  nocursor  gt  lt  -- some stuff -- gt  lt  div gt   lt script type  text javascript  gt      document getElementById  nocursor   style cursor    none    lt  script gt    If you want to set this on the whole body    lt script type  text javascript  gt      document body style cursor    none    lt  script gt    Make sure you really want to hide the cursor  though  It can really annoy people

User · Answer

For whole html document try this  html    cursor none    Or if some css overwrite your cursor  none use  important  html    cursor none important

[javascript] Is it possible to hide the cursor in a webpage using CSS or Javascript?

Examples related to javascript

Examples related to html

Examples related to css