CSS中form元素hover/focus仅子元素变色，如何让整个容器变色？

DevOps 小满

2026-8-17

修复搜索栏容器hover/focus样式不生效的问题

问题根源

你写的CSS选择器里，.search-bar :hover和.search-bar :focus的空格属于后代选择器，只会选中.search-bar下的子元素（input、button），不会对form容器本身生效。要让容器跟着变色，得调整选择器写法。

解决方案

修改以下CSS规则：

拆分选择器，单独给容器本身设置hover和焦点关联样式
用:focus-within监听容器内元素的焦点状态（因为焦点是input获得的，容器本身不会直接触发:focus）

修改后的相关CSS代码：

/* 原.search-bar基础样式保留，可添加过渡让颜色变化更平滑 */
.search-bar {
    display: flex;
    border-radius: 30px;
    border: none;
    outline: none;
    height: 30px;
    width: 250px;
    margin: 15px;
    padding: 10px;
    background-color: rgba(236, 220, 220, 0.817);
    align-items: center;
    align-content: stretch;
    justify-content: center;
    transition: background-color 0.2s ease;
}

/* 容器hover时自身变色 */
.search-bar:hover {
    background-color: rgba(255, 24, 81, .6);
}

/* 容器内元素获得焦点时，容器同步变色 */
.search-bar:focus-within {
    background-color: rgba(134, 131, 181, 0.3);
}

/* 子元素保持透明，避免遮挡容器背景色 */
.search-bar:hover input,
.search-bar:hover button,
.search-bar:focus-within input,
.search-bar:focus-within button {
    background-color: transparent;
}

/* 调整placeholder样式选择器 */
.search-bar:hover input::placeholder {
    color: rgba(236, 220, 220, 0.817);
}

.search-bar:focus-within input::placeholder {
    color: rgba(67, 60, 60, 0.6);
}