CSS: nuclear cursor fix using cursor:inherit on all elements

Adds `*, *::before, *::after { cursor: inherit }` after the html/body
cursor:default rules. This forces explicit inheritance at every element
level, which is the only reliable cross-browser fix (Chrome, Firefox,
Safari all differ in how cursor auto-resolution works on text content).
Restores cursor:pointer for links/buttons and cursor:text for inputs.
This commit is contained in:
Peter Foster
2026-02-22 12:00:23 +00:00
committed by Peter Foster
parent 0136ff95e2
commit 239b01e311
2 changed files with 40 additions and 0 deletions

View File

@@ -18,6 +18,26 @@ body {
cursor: default; cursor: default;
} }
/* Force cursor inheritance - guarantees arrow cursor cross-browser */
*, *::before, *::after {
cursor: inherit;
}
/* Restore pointer for interactive elements */
a, button, [role="button"], label, select,
input[type="submit"], input[type="button"], input[type="reset"],
input[type="checkbox"], input[type="radio"],
.btn, summary {
cursor: pointer;
}
/* Restore text cursor for inputs */
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="url"], input[type="tel"],
input[type="number"], textarea, [contenteditable="true"] {
cursor: text;
}
/* Utility Classes */ /* Utility Classes */
.container { .container {
max-width: 1200px; max-width: 1200px;

View File

@@ -18,6 +18,26 @@ body {
cursor: default; cursor: default;
} }
/* Force cursor inheritance - guarantees arrow cursor cross-browser */
*, *::before, *::after {
cursor: inherit;
}
/* Restore pointer for interactive elements */
a, button, [role="button"], label, select,
input[type="submit"], input[type="button"], input[type="reset"],
input[type="checkbox"], input[type="radio"],
.btn, summary {
cursor: pointer;
}
/* Restore text cursor for inputs */
input[type="text"], input[type="email"], input[type="search"],
input[type="password"], input[type="url"], input[type="tel"],
input[type="number"], textarea, [contenteditable="true"] {
cursor: text;
}
/* Utility Classes */ /* Utility Classes */
.container { .container {
max-width: 1200px; max-width: 1200px;