CODEWITHSUNDEEP
htmlcssinputfocus
Benjamin Sloutsky
Benjamin Sloutsky

Reputation: 63

How can I outline the whole container when search bar is pressed?

How can I outline the whole container(search button and search bar) 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>

Upvotes: 0

Views: 78

Answers (2)

Dave
Dave

Reputation: 356

If you want to use JavaScript for this, something like this should do the trick. Is this something you are looking for?

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

Upvotes: 2

Sahil khan
Sahil khan

Reputation: 135

May be this will help you out

    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>

Upvotes: 0

Related Questions