Tailwind CSS单选按钮在Safari移动端显示不一致问题求助

问题 #

给单选按钮添加Tailwind CSS类后，PC端显示正常，但移动端Safari浏览器中样式出现差异，需要实现跨端样式完全一致。

原代码示例 #

<div class="cursor-pointer border-b border-t py-4 px-4">
  <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <input class="border-accent-black h-4 w-4 cursor-pointer rounded-full accent-black" type="radio" id="1" name="shipping_method_id" value="1" checked="" />
      <label class="cursor-pointer font-medium">Shipping</label>
    </div>
    <div class="flex gap-1 font-medium uppercase">
      <span>FREE</span>
    </div>
  </div>
  <p class="mt-1 pl-6 text-gray-500"></p>
</div>

问题原因 #

Safari对原生<input type="radio">的样式支持有特殊性，默认样式无法被常规Tailwind类完全覆盖，导致移动端显示偏差。

解决办法 #

采用「隐藏原生元素+自定义视觉样式」的方案，彻底摆脱浏览器原生样式限制：

1. 隐藏原生单选按钮 #

给原生input添加opacity-0 absolute类，让它不可见但仍能响应点击、切换选中状态：

<input class="opacity-0 absolute h-4 w-4 cursor-pointer" type="radio" id="1" name="shipping_method_id" value="1" checked="" />

2. 自定义单选按钮视觉样式 #

在input旁新增一个label作为视觉容器，内部用span模拟选中时的圆点，通过:checked伪类关联原生input的状态：

<div class="flex items-center space-x-2">
  <input class="opacity-0 absolute h-4 w-4 cursor-pointer" type="radio" id="1" name="shipping_method_id" value="1" checked="" />
  <!-- 自定义单选按钮的边框容器 -->
  <label for="1" class="relative h-4 w-4 cursor-pointer rounded-full border-2 border-accent-black flex items-center justify-center">
    <!-- 选中时显示的填充圆点 -->
    <span class="h-2 w-2 rounded-full bg-black opacity-0 checked:opacity-100 transition-opacity"></span>
  </label>
  <label class="cursor-pointer font-medium" for="1">Shipping</label>
</div>

3. 完整优化代码 #

<div class="cursor-pointer border-b border-t py-4 px-4">
  <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <input class="opacity-0 absolute h-4 w-4 cursor-pointer" type="radio" id="1" name="shipping_method_id" value="1" checked="" />
      <label for="1" class="relative h-4 w-4 cursor-pointer rounded-full border-2 border-accent-black flex items-center justify-center">
        <span class="h-2 w-2 rounded-full bg-black opacity-0 checked:opacity-100 transition-opacity"></span>
      </label>
      <label class="cursor-pointer font-medium" for="1">Shipping</label>
    </div>
    <div class="flex gap-1 font-medium uppercase">
      <span>FREE</span>
    </div>
  </div>
  <p class="mt-1 pl-6 text-gray-500"></p>
</div>

核心逻辑说明 #

• 原生input仅负责处理交互逻辑，视觉上完全隐藏
• 自定义label的边框对应未选中状态样式
• 内部span通过checked:opacity-100规则，在原生input选中时显示圆点、未选中时隐藏
• transition-opacity让选中/取消的状态切换更平滑

这种方案能完全规避浏览器原生表单样式的差异，确保PC端和移动端Safari显示效果完全一致。

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