input标签聚焦状态下无法修改边框颜色的问题求助

问题原因 #

你遇到的样式不生效问题，本质是浏览器默认给input元素的:focus状态设置了outline轮廓样式，该样式视觉上覆盖了自定义边框效果，看起来就像border设置没生效。

解决方法 #

• 第一步：在.input_bar的基础样式中添加outline: none; 清除默认聚焦轮廓
• 可选优化：如果引入了UI组件库等存在更高优先级的样式覆盖，可以通过提升选择器优先级的方式保证自定义样式生效，比如把:focus选择器改为input.input_bar:focus，非必要不推荐使用!important强制覆盖。

修正后完整代码 #

.input_container {
    width: 100%;
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.input_bar {
    width:90%;
    height: 80%;
    font-size: 18px;
    padding: 15px;
    border-radius: 5px;
    border: solid 1px rgb(206,212,218);
    /* 新增这一行清除默认聚焦轮廓 */
    outline: none;
}

.input_bar:focus {
    border: 1px solid rgb(0, 255, 255);
}

/* 有样式冲突时用下面的高优先级选择器替换上面的:focus样式即可 */
/*
input.input_bar:focus {
    border: 1px solid rgb(0, 255, 255);
}
*/

如果你需要兼顾无障碍可访问性要求，也可以不直接关闭outline，改为自定义outline样式匹配你的设计：比如设置outline: 2px solid rgba(0,255,255,0.2);

内容的提问来源于stack exchange，提问作者Ever Loser