Skip to content

Instantly share code, notes, and snippets.

@murtaugh
Last active May 11, 2023 17:28
Show Gist options
  • Save murtaugh/5247154 to your computer and use it in GitHub Desktop.
Save murtaugh/5247154 to your computer and use it in GitHub Desktop.
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="submit"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
cursor: pointer;
}
button[disabled],
input[disabled] {
cursor: default;
}
@murtaugh
Copy link
Author

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
Copy link

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

@petrchutny
Copy link

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

@OlsonDev
Copy link

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

@sheriffderek
Copy link

@OlsonDev Why not make a pull request?

@lakpahana
Copy link

Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment