html - 尝试重新创建 Chrome 时出现奇怪的轮廓位置大纲

Question

我正在制作一个包含 的自定义项，我的目标是从 中删除自然轮廓/边框并将其放置在包含对象上，这样在聚焦时它仍然看起来很自然，但是，我似乎没有得到自然轮廓外观，而是看起来轮廓被放置在 div 的外部......

自然输入元素

我的自定义 div 包含输入

有没有什么办法可以实现自然的轮廓外观？

我已经outline: 5px auto -webkit-focus-ring-color;用于<div>.

.container {
  display: flex;
  flex-direction: column;
  width: 300px;
}

input, .two {
  font-size: 20px;
  border: 2px solid grey;
  border-radius: 10px;
}

.one {
  margin-bottom: 12px;
}

.two {
  height: 25px;
}

.two:focus-within {
  outline: 5px auto -webkit-focus-ring-color;
}

.three {
  border: 0;
  outline: 0;
  width: 100%;
  background: 0;
}

<div class="container">
  <input class="one" />
  <div class="two">
    <input class="three"/>
  </div>
</div>

标签： htmlcss

Answer 1

您可以尝试给它一个否定的outline-offset，例如outline-offset: -1px;

它不是像素完美的，但它看起来更像是 Chrome 上的内置样式大纲：

但请记住，它可能因不同的设备而异。对我来说-1px看起来最好。

.container {
  display: flex;
  flex-direction: column;
  width: 300px;
}

input, .two {
  font-size: 20px;
  border: 2px solid grey;
  border-radius: 10px;
}

.one {
  margin-bottom: 12px;
}

.two {
  height: 25px;
}

.two:focus-within {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.three {
  border: 0;
  outline: 0;
  width: 100%;
  background: 0;
}

<div class="container">
  <input class="one" />
  <div class="two">
    <input class="three"/>
  </div>
</div>

---

正确的解决方案可能是使用box-sizing: border-box;，边框宽度也计入宽度和高度。所以你不需要做任何事情来使它们看起来相同。

但它似乎不适用于 Safari。

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  width: 300px;
}

input, .two {
  font-size: 20px;
  border: 2px solid grey;
  border-radius: 10px;
}

.one {
  margin-bottom: 12px;
}

.two {
  height: 30px;
}

.two:focus-within {
  outline: 5px auto -webkit-focus-ring-color;
}

.three {
  border: 0;
  outline: 0;
  width: 100%;
  background: 0;
}

<div class="container">
  <input class="one" />
  <div class="two">
    <input class="three"/>
  </div>
</div>