如何修改<sl-input>组件点击时的蓝色高亮边框？

核心问题分析 #

你看到的蓝色边框不是border，而是浏览器默认的**outline**样式，且现代浏览器默认会在:focus-visible状态下触发该样式，而非普通的:focus。你之前修改border-color自然不会生效。

正确的CSS解决方案 #

直接针对outline属性修改，同时使用:focus-visible匹配焦点状态：

/* 修改焦点边框颜色为黑色 */
.input-field::part(base):focus-visible {
  outline-color: #000;
  /* 可选：调整边框宽度和偏移 */
  outline-width: 2px;
  outline-offset: 0;
}

/* 如果需要完全移除焦点边框 */
.input-field::part(base):focus-visible {
  outline: none;
}

如果样式优先级不足，可加上元素标签提升权重：

sl-input.input-field::part(base):focus-visible {
  outline-color: #000;
}

用Firefox DevTools查看焦点状态的方法 #

1. 按F12打开开发者工具，定位到<sl-input>元素
2. 在元素面板右键该元素，选择强制元素状态 → 勾选:focus-visible（或:focus）
3. 切换到样式面板，即可看到控制焦点边框的CSS规则，包括对应属性（outline/border）和选择器，方便精准覆盖

内容的提问来源于stack exchange，提问作者Joshua Jenkinson