默认输入边框在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

喜欢这个吗？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;

inset - 定义3D嵌入边框。

solid - 定义实线边框。

这是你风格的主要不同。

Answer 4

确定了吗

输入有-webkit-appearance：textfield;它的风格

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

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