使用column-count布局的textarea聚焦轮廓溢出至相邻列问题求助

这是CSS多列布局下很常见的小问题——column-count的流式排列会让两个textarea的容器位置非常接近，浏览器默认的聚焦outline（属于元素外部盒模型）就会出现互相覆盖的情况。下面是几个不用舍弃聚焦轮廓的解决方案，按推荐程度排序：

方案1：阻止元素跨列（最推荐） #

给每个包裹textarea的<div>添加禁止跨列的样式，确保每个输入框容器完整留在一列中，从布局根源避免重叠隐患：

#dialogInput > div {
  column-break-inside: avoid;
  /* 兼容WebKit内核浏览器 */
  -webkit-column-break-inside: avoid;
  /* 额外加一点底部间距，让两列视觉上更清爽 */
  margin-bottom: 1rem;
}

方案2：提升聚焦元素的层级 #

如果方案1没达到预期，可以给聚焦状态的textarea设置更高层级，让它的轮廓始终显示在最上层：

textarea:focus {
  position: relative;
  z-index: 1;
}

多列布局里的元素默认层级相同，给聚焦的输入框加z-index就能让它的轮廓不会被旁边的textarea挡住。

方案3：自定义聚焦样式替代原生outline（可选） #

如果想更灵活控制聚焦效果，可以用box-shadow模拟原生outline，精确调整阴影位置避免重叠：

textarea:focus {
  /* 移除原生outline */
  outline: none;
  /* 自定义类似原生的聚焦阴影，可按需调整参数 */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  /* 给输入框加内边距，让阴影不贴紧文字 */
  padding: 0.5rem;
}

把上面任意一种CSS代码加到你的copy-paste-dialog.component.css中，就能解决轮廓重叠的问题啦。

内容的提问来源于stack exchange，提问作者James E