表单输入框:focus伪类不生效问题求助

问题出在浏览器的默认样式上——所有获得焦点的表单元素，浏览器都会自动添加一个outline（外轮廓）样式，这个默认样式会盖过你设置的border，导致你看不到自定义的橙色边框。

解决方法很简单：

• 在input:focus的样式里加上outline: none;，清除浏览器默认的焦点外轮廓，这样你设置的border就能正常显示了。
• 额外提醒：去掉outline后，一定要保证有明确的焦点状态标识（比如你设置的2px粗边框），这是为了满足网页可访问性要求，让键盘导航的用户能清楚知道当前焦点位置。

修改后的完整代码：

input {
    width: 250px;
    height: 35px;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 18px;
    border: 1px solid lightgray;
}

input:focus {
    border: 2px solid rgb(255, 145, 0);
    outline: none; /* 清除默认焦点外轮廓 */
}

<input />

另外还有一种可选方案：如果你不想完全去掉outline，可以直接修改outline的样式，比如：

input:focus {
    outline: 2px solid rgb(255, 145, 0);
    outline-offset: 0; /* 可选：调整外轮廓和边框的间距 */
}

这样既保留了浏览器的焦点提示机制，又能让颜色符合你的需求。

内容的提问来源于stack exchange，提问作者Big Al