Html 框大小边框框和具有未知高度的对象上的边框&；宽度

我有两个输入框，在选中时要突出显示

我应用了以下全局边框框样式：

/* box sizing */

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

据我所知，对任何元素应用边框时，其宽度或高度现在应保持不变

将以下样式应用于我的输入框时：

input{
    padding: 0.5em;
    border: none;
}

input:focus{
    outline: none;
    border: 2px solid $dark_blue_highlight;
}

…大小实际上会随选择而改变

在我找到解决方案之前，我花了几个小时试图解决这个问题：明确定义元素的高度。不是宽度，只有高度起作用。我完全不知所措

我真的更愿意在不定义尺寸的情况下这样做，为什么这不是一个选项？这不应该对大小未知的元素起作用吗

---

有人能给我解释一下这里发生了什么吗？

框大小调整

属性适用于具有已知尺寸的元素。如果没有定义宽度/高度，它将不会像您期望的那样工作。当你不想改变已知尺寸的元素时，它就在那里。如果您尝试设置输入的高度和宽度，您不会发现任何变化。

一个可能的解决方案是设置

边框：2px实心透明然后打开
焦点
设置
边框颜色：蓝色<代码>边框框
指示浏览器在绘制具有定义宽度的对象时仅以AIK方式包含边框。否则就不会进行计算。实际上，定义高度似乎是唯一的解决方案