聚焦其中的输入时更改 div 背景颜色
Changing div background color when focusing on an input inside it
您好,我正在尝试通过单击其中的输入来更改 div 的样式。这是我的 HTML:
<li class="search-bar">
<form action="" class="search-bar">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
<input placeholder="Search term..." type="text" />
</form>
</li>
SCSS:
.search-btn,
input {
background: transparent;
}
.search-bar {
background: $light-grey;
&:hover {
background: $light-grey-hover;
}
&:focus {
background: white;
}
}
单击输入时,.search-bar 背景颜色不会改变。我想这是因为我实际上关注的是其中的输入,而不是 .search-bar div.
如何才能在关注输入时更改包含它的整个 div 的样式?这可以使用 css 吗?我应该使用 js 文件吗?
你可能会使用 :focus-within
:
.search-bar {
background: blue;
}
.search-bar:focus-within {
background: green;
/* and any style you want to reset */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<li class="search-bar">
<form action="" class="search-bar">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
<input placeholder="Search term..." type="text" />
</form>
</li>
您好,我正在尝试通过单击其中的输入来更改 div 的样式。这是我的 HTML:
<li class="search-bar">
<form action="" class="search-bar">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
<input placeholder="Search term..." type="text" />
</form>
</li>
SCSS:
.search-btn,
input {
background: transparent;
}
.search-bar {
background: $light-grey;
&:hover {
background: $light-grey-hover;
}
&:focus {
background: white;
}
}
单击输入时,.search-bar 背景颜色不会改变。我想这是因为我实际上关注的是其中的输入,而不是 .search-bar div.
如何才能在关注输入时更改包含它的整个 div 的样式?这可以使用 css 吗?我应该使用 js 文件吗?
你可能会使用 :focus-within
:
.search-bar {
background: blue;
}
.search-bar:focus-within {
background: green;
/* and any style you want to reset */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<li class="search-bar">
<form action="" class="search-bar">
<button class="search-btn">
<i class="fas fa-search"></i>
</button>
<input placeholder="Search term..." type="text" />
</form>
</li>