如何在无JavaScript情况下关联小费计算器的单选按钮与自定义输入框？

核心思路是利用CSS的:not(:placeholder-shown)伪类检测自定义输入框是否有内容，结合:has()伪类控制其他单选按钮的可交互状态，全程无需JavaScript。

修改后的HTML结构 #

先调整自定义输入区域的结构，确保元素层级能被CSS正确关联：

<div class="input-wrapper tip-section">
  <label class="tip-header">Select Tip %</label>
  <div class="tip-button-container">
    <label class="tip-label" for="5">
      <input type="radio" id="5" name="radio" class="tip-button">
      <span class="tip-span">5%</span>
    </label>
    <label class="tip-label" for="10">
      <input type="radio" id="10" name="radio" class="tip-button">
      <span class="tip-span">10%</span>
    </label>
    <label class="tip-label" for="15">
      <input type="radio" id="15" name="radio" class="tip-button">
      <span class="tip-span">15%</span>
    </label>
    <label class="tip-label" for="25">
      <input type="radio" id="25" name="radio" class="tip-button">
      <span class="tip-span">25%</span>
    </label>
    <label class="tip-label" for="50">
      <input type="radio" id="50" name="radio" class="tip-button">
      <span class="tip-span">50%</span>
    </label>
    <!-- 调整自定义区域，让输入框和对应radio为兄弟元素 -->
    <label class="tip-label custom-label">
      <input id="custom-radio" name="radio" class="tip-button" type="radio">
      <input id="custom" class="custom-tip" type="number" placeholder="Custom">
    </label>
  </div>
</div>

关键CSS修改 #

添加核心状态控制样式，同时优化原有代码：

input {
  font-family      : spaceMonoBold, sans-serif;
  width            : 100%;
  border           : none;
  background-color : var(--very-light-grayish-cyan);
  font-size        : 1.5rem;
  font-weight      : bold;
  text-align       : right;
  color            : var(--very-dark-cyan);
  padding          : .35rem 1rem;
  border-radius    : .25rem;
}
.tip-button {
  display          : none;
}
.tip-span {
  min-width        : 100%;
  height           : 100%;
  text-align       : center;
  display          : flex;
  justify-content  : center;
  align-items      : center;
  background-color : var(--very-dark-cyan);
  color            : var(--white);
  font-size        : 1.5rem;
  border-radius    : .25rem;
  cursor           : pointer;
  transition       : .1s;
}
input:hover + .tip-span {
  background-color : var(--light-grayish-cyan);
  color            : var(--very-dark-cyan);
}
input:active + .tip-span {
  transform        : scale(.9) rotate(3deg); /* 合并重复的transform属性 */
}
input:checked + .tip-span {
  background-color : var(--strong-cyan);
  color            : var(--very-dark-cyan);
}

/* 核心功能：自定义输入有内容时，禁用其他固定比例单选按钮 */
.tip-button-container:has(.custom-tip:not(:placeholder-shown)) 
  .tip-label:not(.custom-label) {
  pointer-events: none; /* 彻底禁用点击交互 */
  opacity: 0.5; /* 视觉弱化提示不可用 */
}

/* 自定义输入有内容时，自动选中对应的radio */
.custom-tip:not(:placeholder-shown) + #custom-radio {
  checked: true;
}

关键说明 #

1. :not(:placeholder-shown)：精准检测自定义输入框是否有用户输入（输入后占位符隐藏，触发该伪类）。
2. :has()：检测父容器内是否存在已输入内容的自定义框，以此控制其他子元素状态。
3. pointer-events: none：直接阻断固定比例单选按钮的点击事件，确保无法切换选项。
4. opacity: 0.5：给不可用选项添加视觉反馈，让用户清晰感知当前状态。

内容的提问来源于stack exchange，提问作者bigtark