css去掉input获取焦点或者激活时的默认边框

在CSS中去除input获取焦点或激活时的默认边框，可以通过以下方式实现：

1. 去除默认焦点样式：

input {
  outline: none;
}

2. 针对Element Plus组件库的el-input组件：

:deep(.el-input__inner) {
  outline: none;
}

/* 或者更具体的选择器 */
:deep(.el-input__wrapper) {
  outline: none;
  box-shadow: none !important; /* Element Plus可能会使用box-shadow模拟边框 */
}

3. 完整示例（可添加到你的Header.vue样式中）：

/* 去除所有input元素的焦点边框 */
input:focus {
  outline: none;
}

/* 去除Element Plus输入框的焦点样式 */
:deep(.el-input__inner:focus) {
  outline: none;
  border-color: initial; /* 保持原有边框颜色或设置为transparent */
}

/* 如果使用了el-input-group等组件 */
:deep(.el-input-group__append:focus),
:deep(.el-input-group__prepend:focus) {
  outline: none;
}

4. 注意事项：- 为了保持可访问性，建议添加自定义的焦点样式 - 可以使用 `:focus-visible` 伪类来仅在键盘导航时显示焦点样式

/* 保持键盘导航的可访问性 */
input:focus-visible {
  outline: 2px solid #409eff; /* 自定义焦点样式 */
  outline-offset: 1px;
}

input:not(:focus-visible) {
  outline: none;
}