Html Question posted in
Some basic documentation can be found here.

Html – Why focus doesn't work on input when we put search icon on input?

this is my HTML code:

 .search-bar{
     width: 40px;
     height: 45px;
     transition: 0.7s;
}
 .search-icon {
     top: .4%;
     right: 5%;
     width: 35px;
     margin-left: 300px;
     cursor: pointer;
     box-sizing: border-box;
}
 .search-bar:focus{
     cursor: pointer;
     width: 200px;
     outline: none;
}
 .search-btn{
     background-color: transparent;
     outline: none;
     border: none;
     position: absolute;
     top: .4%;
     right: -10%;
     width: 35px;
     height: 35px;
     margin-left: 300px;
     cursor: pointer;
}
 .search-icon:focus ~ .search-bar{
     border-width: 0px;
     width: 200px;
}
<div class="mid-header-div">
  <div search-bar-div>
    <input class="search-bar" type="text">
      <button class="search-btn">
        <img class="search-icon" src="../Frst/intermediate/Icon/search.svg" />
      </button>
</div>

Typically, it’s a search bar that when I click on the input box or button, it should increase the width to 200px.
The problem is I have a search icon in this input that when I click on the search icon the width doesn’t increase.

Tags:

3

Answers


  1. 0

    The selector .search-icon:focus ~ .search-bar does not match anything since there is no element with the class search-bar that is a subsequent sibling of an element with the class search-icon when focused.

    Instead, you could consider using JavaScript to focus the <input> element when the .search-icon button is pushed:

    const searchBar = document.querySelector('.search-bar');
document
  .querySelector('.search-icon')
  .addEventListener('click', () => {
    searchBar.focus();
  });
    .search-bar {
  width: 40px;
  height: 45px;
  transition: 0.7s;
}

.search-icon {
  top: .4%;
  right: 5%;
  width: 35px;
  margin-left: 300px;
  cursor: pointer;
  box-sizing: border-box;
}

.search-bar:focus {
  cursor: pointer;
  width: 200px;
  outline: none;
}

.search-btn {
  background-color: transparent;
  outline: none;
  border: none;
  position: absolute;
  top: .4%;
  right: -10%;
  width: 35px;
  height: 35px;
  margin-left: 300px;
  cursor: pointer;
}
    <div class="mid-header-div">
  <div search-bar-div>
    <input class="search-bar" type="text">
    <button class="search-btn">
        <img class="search-icon" src="https://picsum.photos/35/35" />
      </button>
  </div>
    Login or Signup to reply.
  2. 0

    There is no way to select parent element by its child but :has pseudo-class is like indirectly selecting parent by child.

    You should aware of :has because recently it has all browser support

    .search-bar-div{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.search-bar{
    width: 40px;
    transition: 0.7s;
}

.search-bar:focus{
  width: 200px;
  outline: none;
}

.search-bar:has(+ .search-btn:is(:focus,:hover)){ /*magic is here*/
  width: 200px;
}


.search-btn{
  width: 50px;
}
    <div class="mid-header-div">
  <div class='search-bar-div'>
      <input class="search-bar" type="text">
      <button class="search-btn">Button</button>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Add the following rule to increase the width when either the input or icon is focused

    .search-bar:focus,
.search-icon:focus ~ .search-bar {
  cursor: pointer;
  width: 200px;
  outline: none;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search