【CSS】拼接两个input组件会出现双层边框样式问题

问题

将一个选择框和一个输入框拼在一起，发现边框会出现叠加变成2px。
需要消除边框叠加问题。

分析

产生原因很明显，在于两个行内组件都存在边框，其水平排列时边框靠拢，就会产生此效果。对此想到的第一个解决办法，就是利用 border-right: none; 单纯隐藏左侧 Select 组件的右侧边框。但此举虽能解决双层边框问题，但同时会导致左侧选择框 hover 时边框高亮残缺。

解决方案

借鉴 ant design 的 Space.Compact 组件，发现其能实现两个基础组件的拼接，且不存在边框叠加问题。通过 margin-inline-end: -1px; 令双层边框重叠。但此方法依然会导致左侧Input的右侧边框始终被覆盖。
然后通过调整左侧 Select 组件的 z-index，当 hover 时使其层级高于右侧 Input，从而完整显示高亮边框（巧妙应用了样式优先级）。