Ovi's blog on the web and design

Wrong default web cursor

This past year, I’ve tried an experiment on the site. I’ve replaced the ‘text select’ cursor that shows when mousing over text on a website with the default arrow cursor. It’s almost an unnoticeable change, which is the point. It seems to me that changing to the text select cursor is somewhat of a distraction. There are a lot of areas on a website, particularly its layout where the text doesn’t need to be highlighted for any reason. It seems silly to expect it to be done so often.

So instead I’ve decided to change it to the arrow cursor globally:

body { cursor:default; }

And then define it only for certain areas that it may be in fact be helpful to use it:

code { cursor:text; }

This is the standard practice for your desktop apps, why not do the same on the web? Another approach I haven’t quite figured out how to do yet would be to make the arrow the default and then delay the text cursor change for all text as a global event. If someone has an idea how this can be done, contact me and I’ll post it here.

Looking for someone to help you design and build your app or website? Contact me