时间戳

首页 > 解决方案 > 右侧图标时对焦环不一致

css - 右侧图标时对焦环不一致

问题描述

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

代码是：

  <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>

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

所以问题是：

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

在 TailwindPlay 上比较 2 个案例的工作示例

标签： csstailwind-css

解决方案

您可以通过将类添加relative到输入来修复它。

两个示例中的轮廓（“边框”）实际上是相同的。在第二个示例中，图标元素覆盖了轮廓。正如您在这个交互式示例中看到的那样，在 dom 中较晚出现的元素比它们之前的元素“更高”。

添加会自动position: relative;激活z-index并将元素放在它周围的元素之上。

z-index 仅适用于位置属性已显式设置为绝对、固定或相对的元素

Z-Index CSS 属性：全面了解

推荐阅读