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

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>