按下搜索栏时如何勾勒出整个容器的轮廓?

Question

按下搜索栏时如何概述整个容器(搜索按钮和搜索栏(？

.container {
display: flex;
flex-direction: row;
border: 1px solid gray;
width: 22%;
height: 42px;
}
.container:focus {
outline-color: green;
}

<div class="container">
<form>
<center>
<input type="text" class="sea" placeholder="Search supplies...">
<button class="toc">🔍</button>
</center>
</form>
</div>

Answer 1

如果你想用JavaScript来做这件事，像这样的东西应该可以解决问题。这是你要找的东西吗？

(function() {
const inputForm = document.querySelector('.js-formInputX');
const classFocus = "is-focused";

inputForm.addEventListener("focusin", (event)=> {
let currentInput = event.currentTarget;
// Get parent, traverse 2 up, not the most elegant way
let getParent = currentInput.parentNode.parentNode

// Add class
getParent.classList.add(`${classFocus}`);
});

inputForm.addEventListener("focusout", (event)=> {
let currentInput = event.currentTarget;
// Get parent, traverse 2 up, not the most elegant way
let getParent = currentInput.parentNode.parentNode

// Remove class
getParent.classList.remove(`${classFocus}`);
});
})();

.container {
display: flex;
flex-direction: row;
border: 1px solid gray;
width: 22%;
height: 42px;
}
/* Add custom styling here */
.container.is-focused {
border: 2px solid black;
} 
.container:focus {
outline-color: green;
}

<div class="container">
<form>
<input type="text" class="sea js-formInputX" placeholder="Search supplies...">
<button class="toc">🔍</button>
</form>
</div>

Answer 2

也许这会帮助你

document.querySelector(".sea").addEventListener('click',function(){
document.querySelector(".center").classList.add("active");
});

.container {
display:flex;
flex-direction:row;
border:1px solid gray;
width: 22%;
height: 42px;
}
.container:focus {
outline-color: green;
}
form{
padding:2px;
height:50px;
}
.active{
border:1px solid black;
}

<div class = "container">
<form>
<center class="center"><input type = "text" class = "sea" placeholder = "Search supplies..."><button class = "toc">🔍</button></center>
</form>
</div>