单选框选中状态淡线成因及选中图片对齐方法咨询

1. 选中状态单选框淡线的成因与解决 #

那些隐约可见的淡线是浏览器原生单选框的默认样式残留——浏览器自带的表单控件样式（比如内阴影、默认边框伪元素）没被完全覆盖，和自定义的选中态样式叠加后显现出来。

解决办法：给input加上appearance-none，彻底禁用浏览器默认的单选框外观，避免原生样式干扰自定义效果：

input {
    @apply appearance-none border-Neutrals-Grey3 checked:border-Brand-Primary ring-0 ring-inset checked:bg-radio_checked checked:bg-center checked:bg-no-repeat checked:bg-[length:7.99px_7.99px] checked:text-Neutrals-White;
}

2. 选中状态图片对齐修复 #

你当前写的checked:bg-[center_left_right]是无效的背景位置值，Tailwind无法正确解析，导致背景图（勾选图标）对齐错位。只需要把这个属性改成checked:bg-center，就能让背景图在单选框内水平+垂直居中；如果需要特定对齐方式，也可以用checked:bg-[top_center]这类精准位置值。

修改后的完整代码如上所示，既解决了淡线问题，也修复了图片对齐。

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