Css 输入溢出不可见

我正在尝试创建一个工具来更改边距/填充，它看起来像这样您可以增加

剪辑路径的面积以保持溢出可见。剪辑路径不需要适合图元尺寸：


：根目录{
字体大小：16px；
}
.包装纸{
--初始高度：10雷姆；
--初始宽度：24rem；
--偏差：2px；
--厚度：1rem；
位置：相对位置；
保证金：2rem；
}
.外箱{
--高度：var（--初始高度）；
--宽度：var（--初始宽度）；
高度：var（--高度）；
宽度：var（--宽度）；
位置：绝对位置；
排名：0；
左：0；
}
.框边{
--填充：0.125rem；
--高度：计算（var（--初始高度）-2*var（--厚度）-3*var（--填充））；
--宽度：计算值（var（--初始宽度）-2*var（--厚度）-3*var（--填充）；
高度：var（--高度）；
宽度：var（--宽度）；
位置：绝对位置；
顶部：计算（var（--厚度）+var（--填充））；
左：计算值（var（--厚度）+var（--填充））；
边框：1px实心#808080；
}
.box.inner{
--高度：计算值（var（--初始高度）-2*var（--厚度）-5*var（--填充）；
--宽度：计算值（var（--初始宽度）-2*var（--厚度）-5*var（--填充）；
高度：var（--高度）；
宽度：var（--宽度）；
位置：绝对位置；
顶部：var（--填充）；
左：var（--填充）；
}
.框h3{
位置：绝对位置；
顶部：0.125rem；
左：计算值（var（--厚度）*1.2）；
字体大小：calc（var（--厚度）/1.5）；
z指数：10；
保证金：0；
填充：0；
线高：1；
字体系列：Helvetica；
字体大小：400；
}
.这边{
背景色：#facc99；
}
标签{
保证金：0；
填充：0；
}
输入{
高度：1.5雷姆；
宽度：3rem；
边框：1px实心#C0C0；
边界半径：0.125rem；
文本对齐：居中；
}
.这边{
位置：绝对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.左侧{
排名：0；
左：0；
宽度：var（--厚度）；
高度：var（--高度）；
剪辑路径：多边形（-100px计算（-100px+var（--偏差）），-100px计算（100%+100px-var（--偏差）），计算（100px-var（--偏差））计算（100%-100px），计算（101px-var（--偏差））100px）；
}
.侧边{
排名：0；
右：0；
宽度：var（--厚度）；
高度：var（--高度）；
剪辑路径：多边形（计算（100%+100px）计算（var（--偏差）-100px），计算（100%+100px+var（--偏差））100px，计算（100%+100px+var（--偏差））计算（100%+100px），计算（100px+100%）计算（100%+100px-var（--偏差））；
}
.侧面{
排名：0；
左：0；
宽度：var（--宽度）；
高度：var（--厚度）；
剪辑路径：多边形（计算（变量（--偏差）-100px）-100px，计算（100%-var（--偏差）+100px）-100px，计算（100%-100px-var（--偏差））100px，计算（100px+var（--偏差））100px）；
}
.侧面{
底部：0；
左：0；
宽度：var（--宽度）；
高度：var（--厚度）；
剪辑路径：多边形（计算（var（--偏差）-100px）计算（99px+100%）、计算（100%+100px-var（--偏差））计算（100px+100%）、计算（100%-100px-var（--偏差））计算（100%-100px）、计算（100px+var（--偏差））计算（100%-100px））；
}

边缘
衬垫
您的输入字段高于标签-剪辑路径不能超出元素AFAIK的原始尺寸，因此我不认为这在第一时间应该如何工作。我只想从标签中取出输入（添加ID和属性，以保持功能），然后将它们绝对定位在正确的位置-这将删除标签内容的剪裁与输入字段的显示方式之间的任何联系。@CBroe剪裁路径不能超出元素的原始尺寸AFAIK-->可以，剪裁路径接受负值和大于100%的值。直觉上，我们认为元素是边界，但它不是。“剪辑路径”可用于剪辑某些外部样式，如长方体阴影。它可以工作！特别感谢盒子阴影的例子，我很难理解为什么会这样。