How to grey out of stock variants but still clickable?

Topic summary

Request to visually indicate out-of-stock size variants (e.g., product sizes) in grey while keeping them clickable rather than disabled. The goal is a styling-only approach (e.g., via CSS) that does not block interaction.

Key details:

  • Context: e-commerce product page; link to the site was provided for reference.
  • Constraint: Greyed appearance must not remove click functionality (avoid disabling the option).
  • Technology focus: CSS (as tagged), potentially with minimal code adjustments.

Status and outcomes:

  • No code samples, solutions, or agreed approach provided yet.
  • Discussion remains open with the original poster seeking implementation guidance.
Summarized with AI on December 31. AI used: gpt-5.

How to grey out of stock variants but still clickable??

Hello, I want to make out of stock sizes grey, but I want them to be still clickable. Is there some code to make that possible?? Thanks!

The web is:

https://foogaplan.com/