Hover textbox remains fixed when selected

Question

I\'ve created a search bar when, a user hover overs a button a textbox will appear. What i want to do is keep the text box to stay visible once the user has pressed the text box

Answer 1

Try adding this new CSS style to keep the box visible when it has focus:

#search-text:focus {
  left: 0px;    
}

Functional example:

#search-text {
  left:300px;
  position:relative;
}
#search-text:focus {
  left: 0px;    
}
.search:hover #search-text {
  left:0;
  position:relative;
}
.search {
  background: gray;
  display: inline-block;
  padding: 10px;
  overflow:hidden
}

  
  SEARCH