问题
将一个选择框和一个输入框拼在一起,发现边框会出现叠加变成2px。
需要消除边框叠加问题。
分析
产生原因很明显,在于两个行内组件都存在边框,其水平排列时边框靠拢,就会产生此效果。对此想到的第一个解决办法,就是利用 border-right: none; 单纯隐藏左侧 Select 组件的右侧边框。但此举虽能解决双层边框问题,但同时会导致左侧选择框 hover 时边框高亮残缺。
解决方案
借鉴 ant design 的 Space.Compact 组件,发现其能实现两个基础组件的拼接,且不存在边框叠加问题。通过 margin-inline-end: -1px; 令双层边框重叠。但此方法依然会导致左侧Input的右侧边框始终被覆盖。
然后通过调整左侧 Select 组件的 z-index,当 hover 时使其层级高于右侧 Input,从而完整显示高亮边框(巧妙应用了样式优先级)。