Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Next 16 CSS Modules :global pseudo selectors are stripped [3 comments, 4 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#85332•Fetched 2026-04-08 02:16:22
View on GitHub
Comments
3
Participants
4
Timeline
9
Reactions
0
Author
EvHausEvHaus
Participants
danishaftdanishaftEvHausEvHausSHAWON0cSHAWON0ctimneutkenstimneutkens
Timeline (top)
commented ×3labeled ×3subscribed ×2issue_type_added ×1

Code Example

import styles from "./page.module.css";

export default function Home() {
  return (
    <div className={styles.main}>
      <input className={styles.input} type="number" placeholder="Hover me" />
    </div>
  );
}

---

.main :global(input::-webkit-outer-spin-button),
.main :global(input::-webkit-inner-spin-button) {
  appearance: none;
}

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Wed Sep 17 21:35:32 PDT 2025; root:xnu-12377.1.9~141/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.19.3
  npm: 10.8.2
  Yarn: N/A
  pnpm: 10.19.0
Relevant Packages:
  next: 16.0.0 // Latest available version is detected (16.0.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: N/A
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/brave-jones-t7fklq?file=%2Fapp%2Fpage.tsx%3A11%2C62

To Reproduce

Given this simple component:

import styles from "./page.module.css";

export default function Home() {
  return (
    <div className={styles.main}>
      <input className={styles.input} type="number" placeholder="Hover me" />
    </div>
  );
}

And this CSS:

.main :global(input::-webkit-outer-spin-button),
.main :global(input::-webkit-inner-spin-button) {
  appearance: none;
}

Next.js 15 will render the input without the spin buttons, like this:

<img width="736" height="70" alt="Image" src="https://github.com/user-attachments/assets/f8e3e5ca-ce9c-4a6c-b07c-4543d8afac35" />

However, Next.js 16 shows the spin buttons:

<img width="750" height="75" alt="Image" src="https://github.com/user-attachments/assets/ecbfbb4a-1e97-43d6-9992-794346d3ef38" />

The problem seems to be that pseudo selectors like ::-webkit-outer-spin-button aren't working anymore inside the CSS Modules :global() method.

Current vs. Expected behavior

.main :global(input::-webkit-outer-spin-button) doesn't work in Next.js 16 but works in Next.js 15 and earlier

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.0.0: Wed Sep 17 21:35:32 PDT 2025; root:xnu-12377.1.9~141/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 20.19.3
  npm: 10.8.2
  Yarn: N/A
  pnpm: 10.19.0
Relevant Packages:
  next: 16.0.0 // Latest available version is detected (16.0.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

No response

extent analysis

TL;DR

The issue can be resolved by adjusting the CSS selector to properly target the pseudo-elements within the :global() method in Next.js 16.

Guidance

  • Review the CSS Modules documentation to understand how the :global() method interacts with pseudo-selectors.
  • Attempt to modify the CSS selector to use the :global method only for the class, and keep the pseudo-selectors outside of it, like .main :global(input)::-webkit-outer-spin-button.
  • Verify that the issue is specific to Next.js 16 and Turbopack by testing with other versions or build tools.
  • Consider filing an issue with the Next.js or CSS Modules maintainers if the problem persists.

Example

.main :global(input)::-webkit-outer-spin-button,
.main :global(input)::-webkit-inner-spin-button {
  appearance: none;
}

Notes

The provided example code and environment information suggest that this issue may be related to changes in how Next.js 16 handles CSS Modules or pseudo-selectors. However, without further information or testing, it's difficult to provide a definitive solution.

Recommendation

Apply workaround: Adjust the CSS selector as described above to properly target the pseudo-elements. This approach may help resolve the issue without requiring an upgrade or downgrade of Next.js.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#search optimization#API routing#API middleware#SSR setup#ISR setup

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING