仅通过键盘选中子input时为父元素添加焦点样式

一、纯HTML+CSS优化（解决点击触发焦点边框问题） #

用:focus-visible替代:focus-within区分键盘/鼠标触发的焦点——它只会在键盘导航时显示焦点样式，完美解决点击出现边框的问题。结合原生单选按钮的隐藏与自定义样式，实现需求：

<div class="radio-container" tabindex="0">
  <input type="radio" id="custom-radio" name="radio-group" class="hidden-radio">
  <label for="custom-radio" class="custom-label">自定义单选选项</label>
</div>

.hidden-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-container {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

/* 仅键盘聚焦时显示容器焦点边框 */
.radio-container:focus-visible {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}

/* 容器聚焦时，自定义标签的选中样式 */
.radio-container:focus-within .custom-label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid #2196F3;
  border-radius: 50%;
  background-color: #2196F3;
}

/* 未选中时的默认样式 */
.custom-label::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid #ccc;
  border-radius: 50%;
}

二、TypeScript辅助实现回车选中逻辑 #

如果需要容器聚焦时回车直接选中单选框，给容器添加键盘事件监听即可，无需复杂封装：

const radioContainer = document.querySelector('.radio-container') as HTMLElement;
const hiddenRadio = document.querySelector('.hidden-radio') as HTMLInputElement;

radioContainer.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    hiddenRadio.checked = true;
    // 可选：触发原生change事件，同步表单状态
    hiddenRadio.dispatchEvent(new Event('change'));
  }
});

// 可选：点击容器时自动选中，提升交互体验
radioContainer.addEventListener('click', () => {
  hiddenRadio.checked = true;
  hiddenRadio.dispatchEvent(new Event('change'));
});

三、组件封装的适用场景 #

如果这个单选组件需要多页面复用，或者要和React/Vue等框架的状态管理结合，封装成向下传递checked状态的组件会更合适：

• 统一管理选中、焦点状态，避免重复编写DOM操作代码
• 方便通过props控制初始状态、禁用状态等属性
• 更容易和框架的表单校验、状态同步机制集成

以React为例的简单封装：

import { useState } from 'react';

interface CustomRadioProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label: string;
}

export const CustomRadio = ({ checked, onChange, label }: CustomRadioProps) => {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.key === 'Enter') {
      onChange(true);
    }
  };

  return (
    <div 
      className="radio-container" 
      tabindex="0"
      onKeyDown={handleKeyDown}
      onClick={() => onChange(true)}
    >
      <input 
        type="radio" 
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        className="hidden-radio"
      />
      <label className="custom-label">{label}</label>
    </div>
  );
};

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