Last active
May 11, 2023 17:28
-
-
Save murtaugh/5247154 to your computer and use it in GitHub Desktop.
CSS Cursor Reset
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
I wish this was a part of the user agent stylesheets. It makes so much sense!
It really does make sense :) Thanks for elaborating on this.
2.5 years and no one's noticed you're missing input[type="button"]
? Heh.
@OlsonDev Why not make a pull request?
Thank you.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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).