有这个表格:
.header-search {
padding: 16px;
background-color: #ff000080;
}
.header-icon.header-search__icon {
width: 20px;
height: 20px;
}
.header-search__input {
border: none;
/* outline: none; */
font-size: 1.2em;
width: 100%;
font-family: 'Montserrat', sans-serif;
}
.header-search__input::placeholder {
color: #BDBDBD;
font-family: 'Raleway', 'Montserrat', sans-serif;
}
.header-search {
width: 160px;
display: flex;
align-items: center;
}
<form action="search" class="header-search">
<input type="text" class="header-search__input" placeholder="Поиск">
<img src="https://i.ibb.co/vs0dmRq/search.png" class="header-search__icon header-icon" alt="">
</form>
焦点打开时如何使.header-search__input
背景颜色.header-search
变为蓝色。
upd:最好带有动画
upd:我希望它纯粹在 css 中。但如果它是关键的 js 也是可能的
如果您不需要旧版浏览器,则可以使用:focus-within伪类。已经在所有现代浏览器中支持。但是有一个细微差别 - 您无法指定表单内的确切内容应该是焦点,它会对焦点中的任何内容做出反应。
这不能在CSS中完成,因为它指定了从祖先到子代的顺序,反之则不然