默认输入边框在 div 上的显示方式不同

Question

如果我创建一个没有任何样式的输入框(<input>(，然后在devtools中检查计算的css，我看到它有边框2px内嵌rgb(238,238,238(

但是，如果我创建一个具有相同边框的div，它看起来非常不同：

<input>
<br><br>
<div style="border: 2px inset rgb(238, 238, 238); height:15px; width: 169px; "></div>

为什么会这样？什么样的边框会给我与输入相同的边框？

Answer 1

像这样？

<input>
<br><br>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); height:15px; width: 169px; "></div>

Answer 2

它实际上是一个 2px 边框。如果你改变背景 input ，我们可以看到 2px 边框。有关输入，请参见下文background:#f1f1f1。

<input style="background:#f1f1f1;">
<br><br>
<div style="border: 2px inset rgb(238, 238, 238); height:15px; width: 169px; "></div>

Answer 3

这

更有可能与您的<input>风格相同

border: 1px solid rgba(0,0,0,0.4);
height: 19px;
width: 171px;

插图 - 定义 3D 插图边框。

实心 - 定义实心边框。

这是您风格中的主要区别。

Answer 4

OK fount it

输入具有 -webkit-appearance：textfield; 样式

div {
  border: 2px inset;
  -webkit-appearance: textfield;
  height: 15px;
  width: 169px;
}

<input>
<br><br>
<div></div>