按下搜索栏时如何概述整个容器?
How can I outline the whole container when search bar is pressed?
如何在按下搜索栏时绘制整个容器(搜索按钮和搜索栏)的轮廓?
.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>
也许这会对你有所帮助
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>
如果你想为此使用 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>
如何在按下搜索栏时绘制整个容器(搜索按钮和搜索栏)的轮廓?
.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>
也许这会对你有所帮助
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>
如果你想为此使用 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>