Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
CSS Cursor Reset
body {
cursor: default;
code {
cursor: text;
textarea and input[type="text"] already receive
"cursor: text" via browsers' base stylesheets
input[type="checkbox"] {
cursor: pointer;
input[disabled] {
cursor: default;

This comment has been minimized.

Copy link
Owner Author

murtaugh commented Mar 26, 2013

Resetting cursor styles is something I've been doing for a couple of years. The changes aren't drastic; there are only two things that deviate from standard browser defaults:

  1. Set the cursor to "pointer" on button-like elements. That this isn't standard behavior baffles me. (Perhaps browser makers figure that since the thing looks clickable, at least in its native state, the pointer cursor would be redundant?)
  2. Set the cursor as "default" at the top level.

I realize this second item goes against expectations, but I do it expressly to suppress the i-bar cursor on text. Here's my rationale:

99% (probably way more) of the text on the web isn't editable. Selectable, yes, but not editable. The i-bar implies (to me and others I've discussed this with) the idea that "this text is editable;" it implies a specific interaction when none is required or available.

By resetting the cursor styles, only elements that expressly offer an interaction of some kind have the non-default cursor. (I make an exception for code — while code blocks may or may not offer interactivity, I do want to encourage people to cut and paste code samples.)

Note that this doesn't prevent anyone from selecting any and all text, with exactly the same level of precision (Webkit even changes the cursor to the i-beam while you're selecting).


This comment has been minimized.

Copy link

jamesplease commented Nov 22, 2013

I wish this was a part of the user agent stylesheets. It makes so much sense!


This comment has been minimized.

Copy link

petrchutny commented Jul 31, 2014

It really does make sense :) Thanks for elaborating on this.


This comment has been minimized.

Copy link

OlsonDev commented Dec 24, 2015

2.5 years and no one's noticed you're missing input[type="button"]? Heh.


This comment has been minimized.

Copy link

sheriffderek commented Oct 5, 2016

@OlsonDev Why not make a pull request?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.