Css 在输入周围绘制边框，而不影响样式、布局或间距

我使用

box shadow

在选定的HTML元素周围绘制边框（当用户通过单击选择它们时，我在它们上设置了类），因为它不会干扰布局（在元素周围不添加空格，也不会覆盖元素边框）。不幸的是，

box shadow

在某些元素上不起作用，例如，

input

s没有将其

-webkit外观设置为
none

更改外观不是一个选项

我可以在输入周围画一个框架而不影响它的风格吗


outline
不起作用，因为它不能正确显示边界半径
边框
不起作用，因为它添加空格+覆盖任何元素边框。将
框大小调整
更改为
边框框
也不是一个选项
您可以尝试将
边框框
应用于元素，然后使用
边框
样式

input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;     
    border: solid 1px black;
}

使用大纲不会为我增加空间：





您不能使用包装器div吗？但我似乎不记得有过这样的问题？这如何不影响布局？边框框考虑了宽度+填充+边框，以在不影响设置大小的情况下生成元素的完整大小。因此，带有填充、边框等的100px框将保持为100px。抱歉，但我不确定您所说的选择边框是什么意思？您需要在元素上设置一个明确的大小，以便调整框的大小

才能生效，尽管抱歉我的错误-我排除了

大纲

，还有另一个原因。请看我的编辑-但仔细想想，这可能是最好的（最少干扰）选项。这里有一些关于轮廓和边界半径的评论