点击输入框后移除边框并保留hover背景色的CSS问题

问题分析 #

你点击输入框后出现的边框，是浏览器为获得焦点的输入框添加的默认outline样式，并非容器的边框。之前用hover伪类无效，是因为焦点状态需要用:focus伪类来控制。

解决方案 #

修改CSS代码，添加输入框焦点状态的样式移除默认轮廓，同时保留原有的hover背景色：

.cf7b-group-text-582{
    border:1px solid blue;
}
.cf7b-group-text-582:hover{
    background-color:#0C71C3;
}
/* 移除输入框焦点时的默认轮廓 */
.cf7b-group-text-582 .wpcf7-text:focus{
    outline: none;
    /* 可选：如果需要自定义输入框焦点边框，取消注释并修改样式 */
    /* border: 1px solid blue; */
}

说明 #

• outline: none 直接移除浏览器默认的焦点轮廓，解决点击输入框后出现边框的问题。
• 原有的.cf7b-group-text-582:hover样式保持不变，确保鼠标悬停时背景色正常显示。如果hover样式仍不生效，检查是否有更高优先级的CSS规则（比如内联样式、ID选择器）覆盖了它，可通过增加选择器权重（比如添加父类前缀）来调整。

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