Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
CSS Cursor Reset
html,
body {
cursor: default;
}
code {
cursor: text;
}
/*
textarea and input[type="text"] already receive
"cursor: text" via browsers' base stylesheets
*/
a,
label,
button,
input[type="radio"],
input[type="submit"],
input[type="checkbox"] {
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
@murtaugh

This comment has been minimized.

Show comment Hide comment
@murtaugh

murtaugh 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).

Owner

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).

@jamesplease

This comment has been minimized.

Show comment Hide comment
@jamesplease

jamesplease Nov 22, 2013

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

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

@petrchutny

This comment has been minimized.

Show comment Hide comment
@petrchutny

petrchutny Jul 31, 2014

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

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

@OlsonDev

This comment has been minimized.

Show comment Hide comment
@OlsonDev

OlsonDev Dec 24, 2015

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

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

@sheriffderek

This comment has been minimized.

Show comment Hide comment
@sheriffderek

sheriffderek Oct 5, 2016

@OlsonDev Why not make a pull request?

@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