Как я могу выделить весь контейнер при нажатии панели поиска? - PullRequest
Новая
       39

Как я могу выделить весь контейнер при нажатии панели поиска?

0 голосов
/ 29 мая 2020

Как я могу выделить весь контейнер (кнопку поиска и панель поиска), когда панель поиска нажата? 

.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>

Ответы [ 2 ]

2 голосов
/ 29 мая 2020

Если вы хотите использовать 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>
0 голосов
/ 29 мая 2020

Может быть, это вам поможет 

    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>
...