右侧图标时聚焦环不一致

Question

我有以下问题。我有输入，在它的左边我想要有图标。在我专注于输入之前，一切看起来都很好。在这种情况下，右边界（实际上可能是阴影）似乎比其他边界小（不知道为什么？）

代码是：

  <div class="m-10">
  <label class="block text-sm font-medium text-gray-700">
      Password
  </label>
  <div class="mt-1 relative rounded-md flex">
      <input type="password"
              class="flex-1 appearance-none block w-full border border-gray-300 rounded-l-md focus:ring-cyan-500

          focus:outline-none sm:text-sm">

      <span class="inline-flex items-center px-3 rounded-r-md border-l-0 border border-gray-300 bg-gray-50 text-gray-500 sm:text-sm cursor-pointer">
            Some icon
      </span>
  </div>

然而，当我切换元素的顺序（第一个图标，然后输入并切换一些类）然后聚焦时，它看起来很好。

所以问题是：

如何修复它（无需更改标记，因为与实际使用场景相比它被简化了）
为什么边框在焦点上似乎不同
为什么元素的切换顺序会有所不同

Working example comparing 2 cases on TailwindPlay

Answer 1

您可以通过在输入中添加 class relative 来修复它。

两个示例中的轮廓（“边框”）实际上是相同的。在第二个示例中，图标元素覆盖了轮廓。如您在 this interactive example 中所见，dom 中较晚出现的元素比它们前面的元素“更高”。

添加 position: relative; 会自动激活 z-index 并将该元素置于其周围元素之上。

z-index will only work on an element whose position property has been explicitly set to absolute, fixed, or relative

The Z-Index CSS Property: A Comprehensive Look

右侧图标时聚焦环不一致

Focus ring inconsistency when icon on right

css

tailwind-css