如何用HTML/CSS实现单选按钮/复选框互斥灰显及关联控件切换

实现思路 #

• 用原生<input type="radio">实现互斥选择（通过相同name属性保证原生互斥逻辑），配合CSS实现未选中选项的置灰视觉效果
• 利用CSS的:checked伪类+兄弟选择器，控制文件上传按钮、文本输入框的显示/隐藏状态

完整代码实现 #

HTML结构

<div class="radio-group">
  <label class="radio-item">
    <input type="radio" name="action-option" id="opt-upload">
    选项1：上传文件
  </label>
  <label class="radio-item">
    <input type="radio" name="action-option" id="opt-text">
    选项2：输入文本
  </label>
  <label class="radio-item">
    <input type="radio" name="action-option" id="opt-none">
    选项3：无附加操作
  </label>
</div>

<!-- 联动显示的操作区域 -->
<div class="action-area">
  <div class="upload-box">
    <input type="file" id="file-input">
    <label for="file-input">选择文件</label>
  </div>
  <div class="text-box">
    <input type="text" placeholder="请输入内容">
  </div>
</div>

CSS样式

/* 基础布局样式 */
.radio-group {
  margin-bottom: 15px;
}

.radio-item {
  display: block;
  margin: 8px 0;
  cursor: pointer;
}

/* 未选中选项的置灰效果 */
/* 无选中项时所有选项正常；有选中项时，未选中的选项及按钮置灰 */
.radio-group:has(:checked) .radio-item:not(:has(:checked)),
.radio-group:has(:checked) .radio-item:not(:has(:checked)) input {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 联动元素默认隐藏 */
.action-area > div {
  display: none;
  margin-top: 10px;
}

/* 选中选项1时显示文件上传框 */
#opt-upload:checked ~ .action-area .upload-box {
  display: block;
}

/* 选中选项2时显示文本输入框 */
#opt-text:checked ~ .action-area .text-box {
  display: block;
}

/* 可选：美化文件上传按钮 */
.upload-box input[type="file"] {
  display: none;
}

.upload-box label {
  padding: 6px 12px;
  background-color: #2563eb;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

.upload-box label:hover {
  background-color: #1d4ed8;
}

关键逻辑说明 #

1. 互斥与置灰：
   • 所有单选按钮共享相同name属性，原生保证同一时间只能选中一个
   • 通过CSS:has()伪类判断是否有选中项，对未选中的选项应用半透明和禁用光标样式，实现置灰效果
2. 联动显示：
   • 操作区域的元素默认隐藏，当对应单选按钮被选中时，通过:checked伪类+兄弟选择器~触发显示
3. 兼容性提示：:has()伪类已支持Chrome、Edge、Safari等现代浏览器，若需兼容旧版浏览器，可补充少量JavaScript逻辑替代CSS的:has()判断

内容的提问来源于stack exchange，提问作者I'mjusttryingtolearnsoftware